<template>
    <div id="jx-Stvirtual-machine" class="jx-virtual-machine"
        v-loading="deskLoading"
        :element-loading-text="deskLoadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">

<!-- 王天宇 星级评分 html-->
        <div class="jx-virtual-machine-header">
             <div class="step-main-content fl tops">
                <div style="width:50%;"  class="jx-virtual-machine-header-logo fl beyond-hiding" :title="chapterName" v-text="chapterName"></div>

                <div class="star-box fr" v-show="starValue">
                    实验难度：
                    <el-rate disabled disabled-void-color="#545c77" :colors="starColors" v-model="starValue"></el-rate>
                </div>
             </div>
<!-- 王天宇 星级评分 html end-->
            <!-- <div class="jx-virtual-machine-nav fl" v-show="!fullScreen">
                <span class="fl" :class="{ 'active': activeIndex == 1 }" @click="MachineNavTab(1)">实验教学</span>
                <span class="fl" :class="{ 'active': activeIndex == 2 }" @click="MachineNavTab(2)">实验报告</span>
                <span class="fl" :class="{ 'active': activeIndex == 3 }" @click="MachineNavTab(3)">实验笔记</span>
            </div> -->
            <div class="jx-virtual-machine-header-info fr">
                <i class="iconfont icon-jingshi"></i>
                <el-tooltip effect="light" placement="top">
                    <div slot="content" v-if="VirtualMachineInfo.mode">
                        模板类型：<span v-if="VirtualMachineInfo.mode == 1">单节点</span>
                        <span v-else-if="VirtualMachineInfo.mode == 2">集群</span>
                        <div style="line-height:20px;" v-for="(item, index) in VirtualMachineInfo.containers" :key="index">
                            {{ item.containerRole }}<br />
                            ip：{{ item.ip }}<br/>
                            配置：{{ item.flavor }} <br/>
                            镜像名称：{{ item.imageName }}
                            <div style="line-height:20px;" v-for="(subItem, subIndex) in item.ports" :key="subIndex">
                                端口名称：{{ subItem.portName }}<br />
                                容器内地址：{{ subItem.port }}<br />
                                访问地址：{{ `${subItem.ip}:${subItem.exposedPort}` }}
                            </div>
                        </div>
                    </div>
                    <div slot="content" v-else>
                        暂无虚拟机信息
                    </div>
                    <span>虚拟机信息</span>

                </el-tooltip>
            </div>
             <!-- 专科版本yx -->
            <div class="jx-virtual-machine-header-info fr">
               <span @click="detalList"><i class="iconfont icon-liebiao1"></i> &nbsp;章节列表</span>
            </div>
            <!-- 专科版本列表盒子 -->
            <div style="width:1200px; margin:0 auto;">
                <div class="detailBox blocks" style="top:64px;right:200px">
                    <div class="chapterList-top">
                        <p class="fl">章节列表</p>
                        <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
                    </div>
                    <el-collapse  accordion v-model="activeName"  @change="handleChange">
                        <div v-for="(item,index) in appList"  :key="index" >
                            <el-collapse-item v-if="item.levels == 3" :name='index'>
                                <template slot="title">
                                    <div class="collapsTitle">
                                        <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                        <i class="iconfont icon-baoguofahuo" v-else></i>
                                        <span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                                    </div>
                                </template>
                                <div v-for="(items,indexs) in item.children"  :key="indexs" >
                                    <div class="courseName">
                                        {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                                         <i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3" style="vertical-align:baseline"></i>
                                         <i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
                                    </div>
                                     <!-- 多加数据为空 -->
                                    <div v-if="items.otherInfo.length <=0 ">
                                        <span style="padding-left:28px; color:rgb(66, 66, 66)">暂无数据</span>
                                    </div>
                                    <div v-else class="detailbox" v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
                                        <div class="infoName" :class="item3.type == 5 && item3.id == chapterId? 'studying':''">
                                            <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                                            <span class="crile" :class="item3.type == 5 && item3.id == chapterId? 'crileBg':''" v-else></span>
                                            <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
                                            <span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>
                                        </div>
                                        <div class="fr studying" v-if="item3.type == 5 && item3.id == chapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                                    </div>
                                </div>
                            </el-collapse-item>
                            <el-collapse-item  v-if="item.levels == 2" :name='index'>
                                <template slot="title">
                                    <div class="collapsTitle">
                                        <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                        <i class="iconfont icon-baoguofahuo" v-else></i>
                                        <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                                        <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3" style="vertical-align:baseline"></i>
                                        <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                                    </div>
                                </template>
                                <div v-if="item.otherInfo.length > 0">
                                    <div class="detailbox" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
                                        <div class="infoName" :class="item2.type == 5 && item2.id == chapterId? 'studying':''">
                                            <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
                                            <span class="crile" :class="item2.type == 5 && item2.id == chapterId? 'crileBg':''" v-else></span>
                                            <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
                                            <span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
                                        </div>
                                        <div class="fr studying" v-if="item2.type == 5 && item2.id == chapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                                    </div>
                                </div>
                                <div v-else style="padding-left:25px;">暂无数据</div>
                            </el-collapse-item>
                        </div>
                    </el-collapse>
                </div>
            </div>
            <div class="jx-virtual-machine-nav2 fr" v-if="VirtualMachineUrlArr.length > 1">
                <span class="fl" :class="{ active : MachineNavTabIndex == index}" v-for="(item, index) in VirtualMachineUrlArr"  @click="MachineNavTab2(index, item)">{{ item.containerRole }}</span>
            </div>
        </div>
        <div class="jx-virtual-machine-main">
            <div id="scroll-node" class="step-main-content fl new-step-main-content" v-show="!fullScreen">
                <div class="jx-virtual-machine-nav new-nav-naxialai " v-show="!fullScreen">
                    <span class="fl" :class="{ 'active': activeIndex == 1 }" @click="MachineNavTab(1)">实验教学</span>
                    <span class="fl" :class="{ 'active': activeIndex == 2 }" @click="MachineNavTab(2)">实验报告</span>
                    <span class="fl" :class="{ 'active': activeIndex == 3 }" @click="MachineNavTab(3)">实验笔记</span>
                    <span class="fl" :class="{ 'active': activeIndex == 4 }" @click="MachineNavTab(4)">交流/答疑</span>
                </div>
                <div class="tab-main" v-show="activeIndex == 1" style="height: 100%;">

                    <div class = 'jx-main-content' v-if="stepTypeStr == '多步骤实验'">
                        <div>
                            <div class="mask-bg">
                                <ul id="spaceHeight">
                                    <li v-for="(item, index) in stepList" :key="item.id"  :class="{ activeSteep : stepListIndex == index}">{{ index+1 }}、{{ item.name }}</li>
                                </ul>
                            </div>
                            <div class="stepsTitle" v-if='showed && stepList.length>0' :title="stepList.length>0 ?stepList[stepListIndex].name  : ''">{{stepListIndex +1}}、{{stepList.length>0 ?stepList[stepListIndex].name  : ''}}</div>
                                <!-- yx修改之前 -->
                                <!-- <div class="jx-main-content"  v-if="showed && experimentVideoData2  && laboratoryManualData" > -->

                            <div  v-show="flagvideo"  id='videoSteps'>
                                <div class="jx-main-content" >
                                    <video
                                        ref="videoStep"
                                        id="videoStep"
                                        class="video-js vjs-default-skin vjs-big-play-centered"
                                        controls
                                        width="100%"
                                        height="346"
                                        style="object-fit:fill"
                                    >
                                        <!-- <source  :src="experimentVideoData2" > -->
                                    </video>
                                </div>
                            </div>

                            <!-- yx修改之前 -->
                            <!-- <div class="step-main-content-text" v-if="stepListIndex == 0 && laboratoryTargetData != undefined && laboratoryTargetData !=''  "> -->
                            <div class="step-main-content-text bott" v-if="flagTarget " style="width:auto">
                                <div class="markdown-body" v-html="laboratoryTargetData"></div>
                            </div>

                            <!-- yx修改之前 -->
                            <!-- <div class="step-main-content-text bott" v-if="laboratoryManualData || showed"> -->
                            <div class="step-main-content-text bott" v-if="flaglaboratoryManualData " style="width:auto">
                                <div class="markdown-body" v-html="laboratoryManualData"></div>
                            </div>

                            <div  class="jx-main-content" v-if="(!flagvideo && !flagTarget && !flaglaboratoryManualData ) || (flagvideo &&  !flagTarget &&  !flaglaboratoryManualData)">
                                <div class="jx-content-tips nodata-box" style="padding:0;margin-top:0">
                                    <p>暂无内容</p>
                                </div>
                            </div>

                            <div class="mask step-main-content" style="background:rgba(0,0,0,.6)" @click="closeMask"></div>



                            <div class="foot-content step-main-content fl" style="height:40px; line-height:40px" v-if="showed" >
                                <i class="iconfont icon-gengduo" @click="mask" v-show="stepList.length > 0"></i>
                                <div>
                                    <span class="prevpage button-style" v-if="stepListIndex > 0  " @click="page(-1,$event)" >上一步</span>
                                    <span class="nextvpage button-style" v-if="stepList.length >= 1 && !jude" @click="page(1,$event)"  v-preventReClick>下一步</span>
                                    <span class="nextvpage button-style" @click="Retest($event)" v-if="jude" v-preventReClick >重新检测</span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div v-else>

                        <div class="jx-main-content" >
                            <div v-if="flagvideo">
                                <div class="jx-main-content" >
                                    <video id="videoStep3"    class="video-js vjs-default-skin vjs-big-play-centered"  controls  preload="auto" data-setup='{}' width="100%" height="346"  style="object-fit:fill" >
                                        <source  :src="experimentVideoData" >
                                    </video>
                               </div>
                               <!-- <video id="experiment-video" controls  disablePictureInPicture  controlslist="nodownload" width="100%" height="346" style="object-fit:fill" :src="
                               " v-if="experimentVideoData"></video> -->
                            </div>
                            <div class="step-main-content-text" v-if="flagTarget">
                                <div class="markdown-body" v-html="laboratoryTargetData"></div>
                            </div>
                            <div class="step-main-content-text" v-if="flaglaboratoryManualData" >
                                <div class="markdown-body" v-html="laboratoryManualData"></div>
                            </div>
                        </div>

                        <div class="jx-main-content"  v-if="(!flagvideo && !flagTarget && !flaglaboratoryManualData ) || (flagvideo &&  !flagTarget &&  !flaglaboratoryManualData)" >
                            <div class="jx-content-tips nodata-box" >
                                <!-- <img src="./../../../assets/images/index_no_data.png" /> -->
                                <p>暂无内容</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-main" v-show="activeIndex == 2">
                    <div class="clearfix tab-sub">
                        <div class="fl" @click="subActiveIndex = 1" :class="{ 'active': subActiveIndex == 1 }">Word版实验报告</div>
                        <div class="fl" @click="subActiveIndex = 2" :class="{ 'active': subActiveIndex == 2 }">在线版实验报告</div>
                        <span class="look-assess button-style" @click="lookAssest">查看评价</span>
                        <span v-if="resQuestionData.check">报告评分：<em>{{ resQuestionData.score }}分</em></span>
                    </div>
                    <div class="jx-main-content upload-content" style="height:92%;" v-show="subActiveIndex == 1">
                        <div class="excel-content">
                            <div v-if="ReportUploadForm.isUpload" style="margin-bottom:20px;">
                                <img src="../../../assets/images/upload-success.png" />
                            </div>
                            <div style="padding:0px 0 20px;" v-if="ReportUploadForm.isUpload">实验报告已上传</div>
                            <div class="button-style" @click="dialogUpload = true">上传实验报告</div>
                            <span class="model-download" @click="downloadModel">实验报告模板下载
                                <i class="iconfont icon-tubiaozhizuo-"></i>
                            </span>
                        </div>
                        <!-- <el-button class="button-style" @click="submitUpload">保 1存</el-button> -->
                    </div>
                    <div v-show="subActiveIndex == 2" style="height: 93%;">
                        <div class="jx-main-content">
                            <mavonEditor class="step-experiment-editor" ref="ReportQuestion"></mavonEditor>
                            <div class="step-main-btn-group">
                                <!-- 临时保存置灰 -->
                                <el-button v-if="!onlineCommit"  :disabled="onlineCommit" class="button-style" @click="ReportNoteSave(1,0)">保存</el-button>
                                <button class="button-style" @click="ReportNoteSave(1,1)">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-main" style="height: 100%;" v-show="activeIndex == 3" >
                    <div class="jx-main-content">
                        <div class="step-main-content-box">
                            <mavonEditor id="note-editor" class="step-main-editor" ref="question"></mavonEditor>
                        </div>
                        <div class="step-main-btn-group">
                            <!-- <button @click="" class="button-style">预览</button> -->
                            <button class="button-style" @click="NoteSave(1)">保存</button>
                            <button @click="downloadWord" class="button-style">下载</button>
                        </div>
                    </div>
                </div>
<!-- #region 王天宇-问题答疑 html -->
                <div class="tab-main" style="height: 100%;" v-show="activeIndex == 4" >
                    <div id="question-buhui">
                        <div v-if="showTiwenList">
                            <div class="question-b-title">
                                <span>全部问题（{{ questionTiwen.totalCount }}）</span>
                                <div class="question-b-btngroup">
                                    <span><el-checkbox v-model="me" @change="seeMe">只看我的</el-checkbox></span>
                                    <div @click="questionTiwenDialogShow" :class="isForbidden ? 'forbidden-btn' : 'button-style'">我要提问</div>
                                </div>
                            </div>
                            <div class="question-b-list">
                                <div v-if="questionTiwen.tiwenList.length">
                                    <ul class="question-b-list-ul">
                                        <li v-for="(item,index) in questionTiwen.tiwenList" :key="index" @click="questionTiwenListClick(item.id)">
                                            <div :class="{'tea-answer':item.role == 1 || item.role == 5 || item.role == 6}" class="beyond-hiding">{{ item.problemName }}</div>
                                            <div style="min-width:80px; text-align:right;">{{ item.problemCount }} 回答</div>
                                        </li>
                                    </ul>
                                    <el-pagination
                                        @size-change="tiwenHandleSizeChange"
                                        @current-change="tiwenHandleCurrentChange"
                                        :current-page="questionTiwen.currentPage"
                                        :page-size="questionTiwen.pagesize"
                                        layout="total, prev, pager, next, jumper"
                                        :total="questionTiwen.totalCount">
                                    </el-pagination>
                                </div>
                                <div v-else class="jx-content-tips nodata-box" >
                                    <p>暂无相关问答</p>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div v-if="questionDetails" class="question-details">
                                <div class="qd-back" @click="backTiwenList">
                                    <i class="iconfont icon-xiangzuo-copy"></i>
                                    返回列表
                                </div>
                                <div v-if="questionHuifu.data.role != 1 && questionHuifu.data.role != 5 && questionHuifu.data.role != 6" class="stu-answer">{{ questionHuifu.data.userName }}</div>
                                <div class="qd-title">{{ questionHuifu.data.problemName }}</div>
                                <div v-if="questionHuifu.data.role == 1 || questionHuifu.data.role == 5 || questionHuifu.data.role == 6" class="tea-answer"></div>
                                <div class="qd-content markdown-body" v-html="questionHuifu.data.problemContent"></div>
                                <div>
                                    <div @click="questionHuifuDialogShow" :class="isForbidden ? 'forbidden-btn' : 'button-style'">我要回复</div>
                                </div>
                                <div class="qd-list">
                                    <div class="qd-list-title">全部解答（{{ questionHuifu.list.length }}）</div>
                                    <ul v-if="questionHuifu.list.length">
                                        <li v-for="(item,index) in questionHuifu.list" :key="index">
                                            <div>
                                                <span class="qd-name">{{ item.userName }}</span>
                                                <span class="ide" :class="{'tea':item.role == 1 || item.role == 5 || item.role == 6}"></span>
                                            </div>
                                            <div class="markdown-body" v-html="item.answerContent"></div>
                                        </li>
                                    </ul>
                                    <div v-else class="jx-content-tips nodata-box" >
                                        <p>暂无解答</p>
                                    </div>
                                </div>
                            </div>
                            <div style="height:300px; line-height:300px;text-align:center;" v-else>加载中...</div>
                        </div>
                    </div>
                </div>
<!-- #endregion 王天宇-问题答疑 html -->
            </div>
            <div class="step-main-mirror fl">
                <div class="mirror-iframe" v-if="!mirrorIframeTip">
                    <template v-for="(item, index) in VirtualMachineUrlArr">
                        <iframe name="iframeitem"  :key="index" :id="'VirtualMachineIframe' + item.containerId" v-if="VirtualMachineInfo.type==2"  v-show="MachineNavTabIndex == index" :src="item.notebookUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe>
                        <iframe name="iframeitem"  :key="index" :id="'VirtualMachineIframe' + item.containerId" v-if="VirtualMachineInfo.type==1"  v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe>
                    </template>
                    <!-- <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe> -->
                </div>
                <div class="mirror-iframe-tip" v-if="mirrorIframeTip">
                    <img src="./../../../assets/images/mirror_iframe_tip.png" />
                    <span class="mirror-iframe-tip-text">{{ mirrorIframeTipText }}</span>
                    <el-button class="button-style" @click="refreshVirtual(0)">刷 新</el-button>
                </div>
                <div v-if="fullScreen" class="fullSide">
                    <ul v-if="stepTypeStr == '单步骤实验'">
                        <li @click="TargetDialog" v-if="laboratoryTargetData">
                           <i class="iconfont icon-mubiaox"></i>
                            <p>目标</p>
                        </li>
                        <li @click="HandbookDialog" v-if="laboratoryManualData">
                            <i class="iconfont icon-shiyongshouce"></i>
                            <p>手册</p>
                        </li>
                        <li @click="ReportDialog">
                            <i class="iconfont icon-wendang"></i>
                            <p>报告</p>
                        </li>
                        <li @click="HandVideoDialog" v-if="experimentVideoData">
                            <i class="iconfont icon-shipin1"></i>
                            <p>视频</p>
                        </li>
                        <li @click="HandNoteDialog">
                            <i class="iconfont icon-ico_compile_thick"></i>
                            <p>笔记</p>
                        </li>
                    </ul>
                    <ul v-if="stepTypeStr == '多步骤实验'">
                        <li @click="TargetDialog" v-if="laboratoryTargetData">
                            <i class="iconfont icon-mubiaox"></i>
                            <p>目标</p>
                        </li>
                        <li @click="HandbookDialog" v-if="flaglaboratoryManualData">
                            <i class="iconfont icon-shiyongshouce"></i>
                            <p>手册</p>
                        </li>
                        <li @click="ReportDialog">
                            <i class="iconfont icon-wendang"></i>
                            <p>报告</p>
                        </li>
                        <li @click="HandNoteDialog">
                            <i class="iconfont icon-ico_compile_thick"></i>
                            <p>笔记</p>
                        </li>
                    </ul>

                </div>
                <div class="step-main-mirror-side" v-if="fullScreen">
                    <!-- <ul >
                        <li @click="TargetDialog" v-if="laboratoryTargetData"><i class="iconfont icon-mubiaox"></i>目标</li>

                        <li @click="HandbookDialog" v-if="laboratoryManualData"><i class="iconfont icon-shiyongshouce"></i>手册</li>

                        <li @click="ReportDialog"><i class="iconfont icon-wendang"></i>报告</li>
                        <li @click="HandVideoDialog" v-if="experimentVideoData"><i class="iconfont icon-shipin1"></i>视频</li>

                        <li @click="HandNoteDialog"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul> -->
                </div>
                <div class="step-main-mirror-dialog" :style="{ right: mirrorRightWidth + 'px'}" v-show="VirtualMachineUrl" >
                    <div class="step-main-mirror-dialog-block">
                        <div class="step-main-mirror-dialog-box">
                            <div class="mirror-dialog-header">
                                <!-- 计时
                                <span>{{ getHour(resQuestionData.timeLeft) }}</span> -->
                                <Time :autoStart="true"></Time>
                            </div>
                            <div class="mirror-dialog-item">
                                <div class="item-btn">
                                    <span @click="refreshVirtual(0)"><i class="iconfont icon-shuaxin"></i>刷新</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="InitVirtual"><i class="iconfont icon-zhongxinshiyang"></i>初始化</span>
                                    <el-tooltip class="item" effect="light" content="初始化实验环境" placement="left-end">
                                        <i class="iconfont icon-wenti-m"></i>
                                    </el-tooltip>
                                </div>
                                <div class="item-btn" v-if="!fullScreen">
                                    <span @click="VirtualFullScreen(2)"><i class="iconfont icon-full-screen"></i>虚拟机全屏</span>
                                </div>
                                <div class="item-btn" v-if="fullScreen">
                                    <span @click="VirtualFullScreen(3)"><i class="iconfont icon-full-screen"></i>退出全屏</span>
                                </div>
                            </div>
                            <div class="mirror-dialog-item" v-if="VirtualMachineInfo.type==1">
                                <div class="item-btn">
                                    <span @click="SftpConfig"><i class="iconfont icon-upload"></i>SFTP工具</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="UploadFile"><i class="iconfont icon-shangchuan-"></i>文件上传</span>
                                    <!-- <el-tooltip class="item" effect="light" content="上传文件至虚拟机/root/tools/文件夹" placement="left-end" style="position:absolute; right: -10px; top: 5px;">
                                        <i class="iconfont icon-wenti-m"></i>
                                    </el-tooltip> -->
                                </div>
                                <div class="item-btn" v-if="!downFlag">
                                    <span @click="DownloadFile"><i class="iconfont icon-tubiaozhizuo-"></i>下载文件</span>
                                </div>
                                <div class="item-btn" v-if="downFlag" style="color:#666">
                                    <b ><b class="iconfont icon-tubiaozhizuo-" ></b>下载文件</b>
                                </div>
                            </div>
                            <div class="mirror-dialog-item" v-if="VirtualMachineInfo.type==1">
                                <div class="item-btn">
                                    <span @click="ExperimentScreenshot"><i class="iconfont icon-jietu1"></i>实验截图</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="CutDialog"><i class="iconfont icon-jietu"></i>剪切板</span>
                                </div>
                            </div>
                            <div class="mirror-dialog-item" v-if="VirtualMachineInfo.type==1">
                                <div class="item-btn">
                                    <span @click="ShareDesk"><i class="iconfont icon-fenxiang1"></i>分享桌面</span>
                                </div>
                                <div class="item-btn">
                                    <span @click="CloseShare"><i class="iconfont icon-guanbifenxiang"></i>关闭分享</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-main-mirror-arrow" @click="MirrorArrowFn" v-if="VirtualMachineUrl">
                        <div>工具栏</div>
                    </div>
                    <div class="juded"  @click="judeFn" v-if="stepTypeStr == '单步骤实验' && isflagjude "><img src="../../../assets/images/righticon.png" /></div>
                    <!-- <NotesContent></NotesContent> -->
                </div>
            </div>
        </div>
         <!-- 最后一步弹窗 -->
        <div class="lastMask">
            <div class="lastMask-center">
                <div class="bg-img"></div>
                <span class="cha" @click="closeCha">×</span>
                <div class= 'mains'>
                    <p class="title">恭 喜 你</p>
                    <p class="title">完成本节学习</p>
                    <span class=" button-style btnss" @click="closeLab">关闭实验</span>
                    <p @click="backgo" style="cursor:pointer; font-size:14px">回到第一步</p>
                </div>

                <!-- <span class="cha" @click="closeCha2">1×</span> -->
            </div>
        </div>
        <!-- 请求超时盒子 -->
        <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtualFloag" width="460px">
             <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>请求超时，请点击关闭按钮，重新请求</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="VirtualClose">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 专科版本弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 分享桌面 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-share-desktop" title="分享桌面" :visible.sync="dialogShareDesktop" width="460px">
            <div class="dialog-content clear-fix">
                <div class="share-desktop-item">
                    <span class="item-label">分享人：</span>
                    <el-select
                        v-model="ShareDeskData.shareValue"
                        multiple
                        filterable
                        collapse-tags
                        placeholder="请搜索选择用户"
                        @change="selectAll(ShareDeskData.shareValue)">
                        <el-option
                        v-for="item in ShareDeskData.newOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="share-desktop-item">
                    <span class="item-label">允许对方操作：</span>
                    <el-radio-group v-model="ShareDeskData.shareRadio">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogShareDesktop = false">取 消</el-button>
                <el-button class="button-style" @click="ShareSave">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 实验截图 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-screenshot" title="实验截图" :visible.sync="dialogScreenshot" width="800px">
            <div class="dialog-content clear-fix">
                <img :src="dialogScreenshotUrl" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogScreenshotCopy" :data-clipboard-text="'<img src='+dialogScreenshotCopyUrl+'>'">复 制</el-button>
                <el-button class="button-style" @click="dialogScreenshotSave">保 存</el-button>
            </span>
        </el-dialog>
        <!-- 学生实验手册显示隐藏 -->
        <el-dialog :close-on-click-modal="false" class="dialog-handbook" title="学生实验手册显示隐藏" :visible.sync="dialogHandbook" width="460px">
            <div class="dialog-content clear-fix">
                <p>控制该章节学生端所有实验手册显隐</p>
                <p>当前学生端实验手册为 <span>显示</span></p>
                <div class="handbook-item">
                    <span class="item-label">设置：</span>
                    <el-radio-group>
                        <el-radio label="显示"></el-radio>
                        <el-radio label="隐藏"></el-radio>
                    </el-radio-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogHandbook = false">取 消</el-button>
                <el-button class="button-style" @click="dialogHandbook = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 视频 -->
        <el-dialog
            class="dialog-video"
            v-dialogDragResize
            title="视频"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogVideoDrag"
            @close='closeVideoDialog'>
            <div class="dialog-body">
                <div class="line">
                    <!-- <video controls  disablePictureInPicture  controlslist="nodownload" width="100%" height="438" :src="experimentDialogVideoData"></video> -->
                    <video id="videoStep33"    class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" data-setup='{}' width="100%" height="420"  style="object-fit:fill" >
                        <source  :src="experimentVideoData3" >
                    </video>
                </div>
            </div>
        </el-dialog>
        <!-- 实验手册 -->
        <el-dialog
            class="dialog-hand-book"
            style="height:520px"
            v-dialogDragResize
            title="实验手册"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogHandbookDrag"
            :modal-append-to-body="false">
             <div class="stepsTitle" v-if=' stepList.length>0'>
              <p  class="stepsTitle stepsTitle2 ">  {{stepListIndex +1}}、{{stepList.length>0 ?stepList[stepListIndex].name  : ''}}</p>
               <span class="videoflag"  v-show="flagvideo" @click="videoflag"><i class="iconfont icon-shipin4"></i> 视频</span>
            </div>
            <div class="dialog-body" v-if="laboratoryManualData">
                <div class="markdown-body" v-html="laboratoryManualData"></div>
            </div>
            <div v-else>
                <div class="jx-content-tips  nodata-box"  style="padding:0; height:380px">
                    <p>暂无内容</p>
                </div>
            </div>
            <div slot="footer" class="dialog-footer" v-if="stepTypeStr == '单步骤实验'" >
                <!-- <el-button class="button-style">确定</el-button> -->
            </div>
            <div slot="footer" style="text-align:right; padding-top:10px"   v-if="stepTypeStr == '多步骤实验'">
                <el-button class="button-style"  @click="page(-1,$event,2)" v-if="stepListIndex > 0">上一步</el-button>
                <span class="nextvpage button-style" v-if="stepList.length >= 1 && !jude" @click="page(1,$event,2)"  v-preventReClick>下一步</span>
                <span class="nextvpage button-style" @click="Retest($event)" v-if="jude" v-preventReClick >重新检测</span>
            </div>
        </el-dialog>
        <!-- 实验目标 -->
        <el-dialog
            class="dialog-target"
            v-dialogDragResize
            title="实验目标"
            style="height:520px"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogtargetDrag"
            :modal-append-to-body="false">
            <div class="dialog-body">
                <div class="markdown-body" v-html="laboratoryTargetData"></div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogtargetDrag = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 实验笔记 -->
        <el-dialog
            class="dialog-hand-note"
            v-dialogDragResize
            title="实验笔记"
            :modal="false"
            style="height:520px"
            :close-on-click-modal="false"
            :visible.sync="dialogHandNoteDrag"
            :modal-append-to-body="false">
            <div class="dialog-body">
                <mavonEditor style="height: 100%;" ref="HandNoteDialog"></mavonEditor>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="NoteSave(2)">确定</el-button>
            </div>
        </el-dialog>
        <!-- 下载文件 -->
        <el-dialog :close-on-click-modal="false"  class="dialog-download-file" title="从实验环境导出代码" :visible.sync="dialogDownload" width="480px">
            <div class="dialog-content">
                <p>将需要的代码文件放入到"/data"目录, 点击下载会把该目录打包下载。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DownloadSave">下 载</el-button>
                <el-button class="button-style" @click="dialogDownload = false">取 消</el-button>
                <!-- <a @click="DownloadSave" class="button-style" style="width:90px;" :href="'/tes/experiment/course/'+chapterId+'/download'">下 载</a> -->
            </span>
        </el-dialog>
        <!-- SFTP -->
        <el-dialog :close-on-click-modal="false" class="sftp-dialog" title="SFTP工具" :visible.sync="dialogSftp" width="540px">
            <div class="sftp-content">
                <div class="sftp-header">
                    <div class="sftp-title">
                        您可以使用SFTP工具上传、下载文件:
                    </div>
                    <p>SFTP访问的地址为 <span>{{ sftpPort[0] }}</span> 端口号为 : <span>{{ sftpPort[1] }}</span></p>
                    <p>用户名 : <span>root </span> 密码 : <span>root</span></p>
                </div>
                <div class="sftp-desc">
                    <div class="sftp-title">
                        上传工具为WinSCP
                    </div>
                    <div class="desc-item">
                        <p>
                            <img class="item-pic" src="./../../../assets/images/sftp.png"  />
                            <a :href="sftpIp[1]+'/WinSCP_64-Setup.exe'">
                                <i class="iconfont icon-tubiaozhizuo-">
                                    <!-- <img src="./../../../assets/images/sftp_icon1.png" /> -->
                                </i>
                                立即下載
                            </a>
                            <!-- <a :href="sftpIp[1]+'/WinSCP_64-Setup.exe'">
                                <i class="iconfont icon-xiazai2">
                                    <img src="./../../../assets/images/sftp_icon2.png" />
                                </i>
                            </a> -->
                        </p>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogSftp = false">确定</el-button>
            </div>
        </el-dialog>
        <!-- 剪切板 -->
        <el-dialog :close-on-click-modal="false" class="cut-dialog" title="剪切板" :visible.sync="dialogCut" width="655px" @close="CutCloseDialog">
            <div class="cut-title">
                <p><span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存</p>
            </div>
            <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
                <el-form-item prop="desc">
                    <el-input type="textarea" @input="CutContentInput" maxlength="20000" v-model="cutData.cutRuleForm.desc" style="height:200px;"></el-input>
                    <div class="desc-num">{{cutData.cutRuleForm.descNum}}/20000</div>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button  class="button-style" @click="cutSubmitForm('cutRuleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 文件上传 -->
        <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="文件上传" :visible.sync="dialogFileUpload" width="460px" @close="CloseFileUploadDialog">
            <el-form :model="FileUploadForm" :rules="FileUploadRules" ref="FileUploadForm">
                <el-form-item class="version-file">
                    <el-button class="button-style">上传文件<input id="version-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getFile"></input></el-button>
                    <p style="float:left; line-height: 36px; color: #1277eb; margin-left: 5px;">上传文件至虚拟机/root/tools/文件夹</p>
                    <p style="float:left; margin-top: 20px; word-break:break-all; width: 100%;" v-if="FileUploadForm.versionFile.length>0">已选: {{FileUploadForm.versionFile}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button class="button-style" style="width: 100px;" @click="UploadSave('FileUploadForm')">上传至虚机</el-button>
            </div>
        </el-dialog>
        <!-- 关闭分享 -->
        <!-- <el-dialog :close-on-click-modal="false" class="dialog-download-file" title="关闭分享" :visible.sync="dialogCloseShare" width="460px">
            <div class="dialog-content">
                <p>是否关闭分享</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogCloseShare = false">取 消</el-button>
            </span>
        </el-dialog> -->
        <!-- 显隐控制 -->
        <el-dialog :close-on-click-modal="false" class="dialog-display-hide" title="学生手册显隐控制" :visible.sync="dialogDisplayHide" width="500px">
            <el-table :data="DisplayHideData" ref="multipleTable" height="400" :row-class-name="tableRowClassName"  @select-all="handleSelectAllChange"  @selection-change="handleSelectionChange" @select="toggleRowClick">
                <el-table-column type="selection" width="100"></el-table-column>
                <el-table-column property="name" label="章节名称"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DisplayHideSave">确 定</el-button>
                <el-button class="button-style" @click="dialogDisplayHide = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 重选配置 -->
        <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="重选配置" :visible.sync="dialogDistributionFormVisible"  label-width="100px" width="830px">
            <el-form :model="distributionform" ref="distributionform">
                <el-form-item class="is-required" label="实验类型：">
                        <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
                            <el-radio :label="1">可视化实验</el-radio>
                            <el-radio :label="2">NoteBook实验</el-radio>
                        </el-radio-group>
                    </el-form-item>
                <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
                    <el-radio-group v-model="distributionform.resource">
                        <el-radio :label="1">单节点</el-radio>
                        <el-radio :label="2">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="distributionform.experimentType == 2">
                    <el-form-item class="config-item">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像：">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                </template>
                <template v-if="distributionform.experimentType == 1">
                    <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
                    <!-- 伪分布 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 1">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.distributedData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 1">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <!-- 主节点 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="nodeMianData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="nodeMianData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.nodeMianData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 2">
                        <el-cascader
                            :options="distributionform.options7"
                            v-model="distributionform.optionsValue7"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
                    <!-- 镜像配置 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="mirrorConfigData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="mirrorConfigData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.mirrorConfigData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <!-- 镜像配置 -->
                    <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
                        <div class="virtual-step">
                            <ul>
                                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)))" :class="{ active:((index+1)) == distributionform.virtualStepCurrent}">{{item.value}}</li>
                            </ul>
                        </div>
                    </el-form-item>
                    <div class="item-node" v-if="distributionform.resource == 2">
                        <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 1 || distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options1"
                                v-model="distributionform.optionsValue1"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 || distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options2"
                                v-model="distributionform.optionsValue2"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options3"
                                v-model="distributionform.optionsValue3"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options4"
                                v-model="distributionform.optionsValue4"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options5"
                                v-model="distributionform.optionsValue5"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options6"
                                v-model="distributionform.optionsValue6"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                    </div>
                </template>
            </el-form>
            <div class="distribution-item" v-if="distributionform.distributionData">
                <div class="jx-course-box">
                    <img :src="distributionform.distributionData.iconUrl" />
                    <span v-text="distributionform.distributionData.imageName"></span>
                </div>
                <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
                    <img src="./../../../assets/images/gpu_icon.png" />
                </div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
                    <img src="./../../../assets/images/notebook_icon.png" />
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DistributionFormSave('distributionform')">保 存</el-button>
            </div>
        </el-dialog>
        <!-- 实验报告文件上传 -->
        <el-dialog :close-on-click-modal="false" class="upload-dialog" title="上传实验报告" :visible.sync="dialogUpload" width="460px" @close="ReportUploadClose">
            <!-- <el-form label-width="100px">
                <el-form-item label="文件上传 :">
                    <el-upload ref="upload" :on-success="handleAvatarSuccess" :on-error="uploadError" :on-progress="uploadProgress" class="upload-demo" :action="'/tes/course/'
                            + $localstorage.getLocalStorage('setCourseId')+
                            '/chapter/'+
                            chapterId
                            +'/report'
                            " :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :auto-upload="false">
                        <el-button @click="clearFiles" class="button-style">上传实验报告</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button class="button-style" @click="submitUpload">保存</el-button>
            </div> -->
            <el-form :model="ReportUploadForm" :rules="ReportUploadRules" ref="ReportUploadForm" label-width="100px">
                <el-form-item label="文件上传 :" prop="versionFile" class="version-file">
                    <el-button class="button-style">上传文件<input id="report-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getReportFile"></input></el-button>
                    <p v-if="ReportUploadForm.versionFile.length>0">已选: {{ReportUploadForm.versionFile}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button class="button-style" @click="ReportUploadSave('ReportUploadForm')">保存</el-button>
            </div>
        </el-dialog>
        <!-- 报告 -->
        <el-dialog class="dialog-report"
            v-dialogDragResize
            title="实验报告"
            style="height:620px"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogReportDrag"
            :modal-append-to-body="false">
            <div class="dialog-body">
                <div class="tab-main">
                    <div class="clearfix tab-sub">
                        <div class="fl" @click="subActiveIndex = 1" :class="{ 'active': subActiveIndex == 1 }">Word版实验报告</div>
                        <div class="fl" @click="subActiveIndex = 2" :class="{ 'active': subActiveIndex == 2 }">在线版实验报告</div>
                    </div>
                    <div class="jx-main-content upload-content" v-show="subActiveIndex == 1">
                        <div class="excel-content">
                            <div v-if="ReportUploadForm.isUpload" style="margin-bottom:20px;">
                                <img src="../../../assets/images/upload-success.png" />
                            </div>
                            <div style="padding:0px 0 20px;" v-if="ReportUploadForm.isUpload">实验报告已上传</div>
                            <div class="button-style" @click="dialogUpload = true">上传实验报告</div>
                            <span class="model-download" @click="downloadModel">实验报告模板下载
                                <i class="iconfont icon-tubiaozhizuo-"></i>
                            </span>
                        </div>
                    </div>
                    <div v-show="subActiveIndex == 2" >
                        <div class="jx-main-content" style="height: 480px;">
                            <mavonEditor class="step-main-editor" ref="ReportQuestionDialog"></mavonEditor>
                            <div class="step-main-btn-group" style="text-align:center; margin-top: 20px;">
                                <!-- 临时保存置灰 -->
                                <el-button v-if="!onlineCommit" :disabled="onlineCommit" class="button-style" @click="ReportNoteSave(2,0)">保存</el-button>
                                <button class="button-style" @click="ReportNoteSave(2,1)">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 配置提示弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-config-tip" title="提示" :visible.sync="dialogConfigTip" width="460px">
            <div class="dialog-content">
                <p>虚拟机配置已被修改，点击'确定'将立即重启虚拟机。点击'取消'稍后可通过'刷新'功能重启虚拟机。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogConfigTip = false">取 消</el-button>
                <el-button class="button-style" @click="DialogConfigTip">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 初始化弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-init-virtual" title="提示" :visible.sync="dialogInitVirtual" width="460px">
            <div class="dialog-content">
                <p>初始化会丢失文件、数据，确定要初始化吗?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogInitVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="DialogInitVirtualSave(0)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 关闭分享 -->
        <el-dialog :close-on-click-modal="false" class="dialog-close-share" title="提示" :visible.sync="dialogCloseShare" width="460px">
            <div class="dialog-content">
                <p>是否要关闭分享?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogCloseShare = false">取 消</el-button>
                <el-button class="button-style" @click="DialogCloseShareSave">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            class="bigger-dialog"
            :visible.sync="bigger"
            >
            <img :src="biggerImgPath">
        </el-dialog>

        <!-- 二期新增评价 -->
        <el-dialog :close-on-click-modal="false" class="assess-dialog" title="评价" :visible.sync="dialogAssess" width="660px">
            {{ resQuestionData.checkResult }}
        </el-dialog>
<!-- #region 王天宇-问题答疑 html dialog -->
        <!-- 我要提问 -->

        <el-dialog
            :close-on-click-modal="false"
            class="question-buhui-tiwen-dialog"
            :visible.sync="questionTiwenDialog"
            title="我要提问"
            >
            <div class="dialog-content" style="text-align:left">
                <div class="dialog-tiwen-title">
                    <span class="tiwen-bt">问题标题：</span>
                    <el-input v-model="questionTiwen.title" placeholder="请输入问题标题"></el-input>
                </div>
                <div class="dialog-tiwen-content">
                    <div class="ms-title tiwen-bt">问题描述：</div>
                    <div>
                        <mavonEditor class="step-experiment-editor" ref="questionTiwen"></mavonEditor>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="submitTiwen">提 交</el-button>
            </span>
        </el-dialog>
        <!-- 我要回复 -->
        <el-dialog
            :close-on-click-modal="false"
            class="question-buhui-tiwen-dialog"
            :visible.sync="questionHuifuDialog"
            title="我要回复"
            >
            <div class="dialog-content" >
                <div class="dialog-tiwen-content">
                    <div class="ms-title tiwen-bt" style="text-align:left">回复内容：</div>
                    <div>
                        <mavonEditor class="step-experiment-editor" ref="questionHuifu"></mavonEditor>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="submitHuifu">提 交</el-button>
            </span>
        </el-dialog>
<!-- #endregion 王天宇-问题答疑 html dialog -->
    </div>
</template>

<script>

    import videojs from 'video.js'   //视频
    import mavonEditor from "../../../components/mavonEditor"
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    // import NotesContent from "../../../components/NotesContent"
    import Time from '../../../components/Time'
    //导出word
    import "../../../../static/wordExport/jquery.wordexport";
    import { htmlToPDF } from '@/api/Virtual';
    export default {
        components: {
            mavonEditor,
            swiper,
            swiperSlide,
            // NotesContent,
            Time
        },
        data () {
            return {
                //临时保存置灰
                onlineCommit:true,
// 王天宇 星级评分 data
                starValue:2,
                starColors:['#c0c4cc', '#c0c4cc', '#c0c4cc '],
// 王天宇 星级评分 data end
//#region 王天宇-问题答疑
                //只看我的
                me:false,
                //我要提问列表和详情页显示
                showTiwenList:true,
                //我要提问弹层
                questionTiwenDialog:false,
                //我要回复弹层
                questionHuifuDialog:false,
                //我要提问详情页数据
                questionHuifu:{
                    data:'',
                    list:[],
                },
                //全部内容loading
                questionDetails:false,
                //我要提问数据
                questionTiwen:{
                    //标题
                    title:'',
                    //内容
                    content:'',
                    //分页
                    pagesize:10,
                    //分页
                    currentPage:1,
                    //分页
                    totalCount: 1000,
                    //提问列表
                    tiwenList:[],

                },
//#endregion 王天宇-问题答疑
                // 浏览器分辨率
                ScreenSigma: '',
                //桌面loading
                deskLoading: false,
                deskLoadingText: '桌面加載中',

                contentLoading: null,
                // 登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',
                // 课程ID
                courseId: '',
                // 章节ID
                chapterId: '',
                // 课程名称
                courseName: '',
                // 导航active
                activeIndex: 1,
                // 实验手册data
                experimentVideoData: '',
                // 弹窗视频data
                experimentDialogVideoData: '',
                laboratoryManualData: '',

                // 实验目标
                laboratoryTargetData: '',
                // 实验报告tab切换
                subActiveIndex: 1,
                // 实验报告信息
                // resQuestionData: '',
                // 实验报告上传弹窗
                dialogUpload: false,
                // 虚机信息
                VirtualMachineInfo: '',
                // 虚机全屏fullScreen
                fullScreen: false,
                // 虚机地址
                VirtualMachineUrl: '',
                VirtualMachineUrlArr: [],
                // 虚机当前ID数组
                VirtualMachineIdArr: [],
                // 虚机当前容器ID
                VirtualMachineId: '',
                iframeHeight: '',
                // 虚机切换导航列表
                virtualMachineNavList: [],
                // 虚机导航列表index
                MachineNavTabIndex: '0',
                // 虚拟机id
                containerId: '',
                toolbarsMav: {
                    bold: true, // 粗体
                    italic: false, // 斜体
                    header: true, // 标题
                    //underline: true, // 下划线
                    //strikethrough: true, // 中划线
                    //mark: true, // 标记
                    //superscript: true, // 上角标
                    //subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    help: true, // 帮助
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    preview: true, // 预览
                    fullscreen: true    // 全屏编辑
                },
                // 分享控制弹窗
                // dialogShare: false,
                shareData: '',
                // 重选配置弹窗
                dialogDistributionFormVisible: false,
                distributionform: {
                    // 类型
                    resource: 1,
                    // 实验类型 1 可视化实验 2 notebook实验
                    experimentType:1,
                    // 伪分布数组
                    distributedData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        // switchValue: false
                    },
                    // 镜像配置
                    mirrorConfigData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    // 主节点
                    nodeMianData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    options0: [
                    ],
                    optionsValue0: [],
                    options1: [],
                    optionsValue1: [],
                    options2: [],
                    optionsValue2: [],
                    options3: [],
                    optionsValue3: [],
                    options4: [],
                    optionsValue4: [],
                    options5: [],
                    optionsValue5: [],
                    options6: [],
                    optionsValue6: [],
                    options7: [],
                    optionsValue7: [],
                    virtualStepList: [
                        { value: 1 },
                        { value: 2 }
                    ],
                    virtualStepCurrent: 1,
                    // 镜像列表数据
                    distributionData: ''
                },

                // 分享桌面
                dialogShareDesktop: false,
                // 分享桌面下拉
                ShareDeskData: {
                    oldOptions: [
                        {
                            value: '全选',
                            label: '全选'
                        }
                    ],
                    newOptions: [
                        {
                            value: '全选',
                            label: '全选'
                        }
                    ],
                    shareValue: [],
                    lodShareValue: [],
                    shareRadio: 0
                },
                // 关闭分享
                dialogCloseShare: false,
                // 实验截图
                dialogScreenshot: false,
                dialogScreenshotCopyUrl: '',
                // 实验截图url
                dialogScreenshotUrl: '',
                // 学生手册
                dialogHandbook: false,
                // 视频拖拽
                dialogVideoDrag: false,
                // 手册拖拽
                dialogHandbookDrag: false,
                // 实验目标
                dialogtargetDrag: false,
                // 实验笔记拖拽
                dialogHandNoteDrag: false,
                // 实验报告拖拽
                dialogReportDrag: false,
                // 下载文件弹窗
                dialogDownload:  false,
                // sftp
                dialogSftp: false,
                // Sftp ip
                sftpIp: '',
                sftpPort: '',
                sftpHost:'',
                // 剪切板dialog
                dialogCut: false,
                cutData: {
                    cutRuleForm: {
                        desc: '',
                        descNum: 20000
                    },
                    cutRules: {
                        desc: [
                            { required: true, message: '请填写内容', trigger: 'blur' }
                        ]
                    }
                },
                // 文件上传dialog
                dialogFileUpload: false,
                FileUploadForm: {
                    fileName: '',
                    versionFile: ''
                },
                FileUploadRules: {
                    versionFile: [
                        { required: true, message: '请上传文件', trigger: 'blur' }
					]
                },
                // 实验报告上传
                ReportUploadForm: {
                    fileName: '',
                    versionFile: '',
                    isUpload: false
                },
                ReportUploadRules: {
                    versionFile: [
                        { required: true, message: '请上传文件', trigger: 'blur' }
					]
                },
                val: '123',
                // 虚机右侧导航
                mirrorRightWidth: 0,
                // 学生端实验报告tab切换标记
                subActiveIndex: 1,
                //当前题
                resQuestionData: "",
                fileList: [],
                // 显隐弹窗
                dialogDisplayHide: false,
                DisplayHideData: [],
                multipleSelection: [],
                // 通知消息
                websock: null,
                over: null,
                //消息通知
                noteBottom: -172,
                notesData: [],

                // 统计删除
                DeleteWebsock: null,
                DeleteWebsockOver: null,

                // 配置提示弹窗
                dialogConfigTip: false,

                // 初始化弹窗
                dialogInitVirtual: false,
                // 错误提示
                mirrorIframeTip: false,
                mirrorIframeTipText: '',

                // 图片放大
                biggerImgPath: '',
                bigger: false,

                // 二期需求
                CutSwitch: false,


                //专科版本需求
                activeName: '',
                appList: [],
                //是否添加过班级
                userStatus: '',
                //弹窗
                dialogVirtual:false,
                //存储点击的那个章节id
                clickId:'',
                //列表值
                openFlag:'',

                // 二期评价
                dialogAssess: false,
                dialogAssessText: '',

                // 班级ID
                classId: '',

                 //是否可以下载
                downFlag:false,
                 //以下是互联网
                //单任务还是多任务
                stepTypeStr:'',
                stepListIndex:0,
                stepList:[],
                stepChapterId:'',
                //完成只显示1次
                finishFlag: false,

                //视频
                myVideo2:'',
                //视频播放时长
                videocurrentTime:'',


                experimentVideoData2:'',
                //小天接口里要班级id
                myClassId:'',
                 //手册 视频 目标隐藏
                flaglaboratoryManualData:'',
                flagvideo:'',
                flagTarget:'',

                //检测是否通过
                jude:'',
                //类型
                stepType:'',
                //全屏下视频
                myVideo4:'',
                experimentVideoData3:'',
                showed:'',
                chapterName:'',
                singleTask:'',


                //向后台发送数据
                websock2:'',

                //方正加的字段代表 视频暂停和开始
                isPlay:'',
                //是否有判定
                isflagjude:'',
                tim:'',

                //超时弹窗
                dialogVirtualFloag:false,
                myVideo3:'',
                // 是否被禁言
                isForbidden:false,
            }
        },
        created () {
            let self = this;
            localStorage.setItem('SCROLLTOP', 0);
            //班级Id
            self.classId = self.$route.query.classId
            //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 单任务  多任务id
            self.chapterId = self.$route.query.chapterId

            //判断是单任务还是多任务
            self.stepTypeStr = self.$route.query.stepTypeStr

            //章节ID
            self.singleChaper =  self.$route.query.singleChaper

            self.ScreenSigma = (window.screen.width / window.screen.height).toFixed(2)
            self.$nextTick(function () {
                self.iframeHeight = $(window).height() - 60
                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                window.onresize = function () {
                    if(self.fullScreen){
                        $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                        setTimeout(() => {
                            $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                        }, 1000);
                    }else{
                        self.iframeHeight = $(window).height() - 60
                        $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * self.iframeHeight)
                        $('.jx-virtual-machine-main').height(self.iframeHeight)
                        $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                    }
                }

                // 设置编辑器高度
                $('.step-main-editor').css({
                    'height': $(window).height() - 215 + 'px'
                })
                $('.step-experiment-editor').css({
                    'height': $(window).height() - 275 + 'px'
                })
                $('.step-experiment-editor .v-note-wrapper').css({
                    'height': '100%',
                    'z-index': '1'
                })
                $('.step-main-editor .v-note-wrapper').css({
                    'height': '100%',
                    'z-index': '1'
                })



                //yx 添加分辨率判断
                  if(window.screen.height <= 900 || $('.jx-virtual-machine-main').height() <= 715){
                    let h = $('.jx-virtual-machine-main').height()
                    $('.blocks').css('max-height',h-20+'px')
                    $('.detailBox').css('max-height',h-20+'px')
                   // $('.blocks').css('right','110px')
                }
// 王天宇 星级评分 created
            //获取评分
            self.getStar();
// 王天宇 星级评分 created end
            })
            self.getClassInfo()
            // 初始化学习手册
            //self.InitManual()
            // 初始化进入实验
            self.InitExperiment(0)



            // 初始化头部信息
            self.InitHeaderInfo()

            // 计时
            // self.TimeStart()
            // 初始化socket
            // self.InitWebSocket()
            // 统计删除socket


            // 获取实验报告
            self.ExperimentalReport()

            self.initClipboarFalg()

            //专科版本 获取列表数据
            self.DetailData()
            //是否添加过班级
            self.ClassInit()

            //文件下载
            self.AssintShow()

            if(self.stepTypeStr != '多步骤实验'){
                self.InitManual()
                self.isshowjude()
            }
            if(self.roles ==  'STUDENT'){

                self.onmessages()

            }
        },
        watch: {
            activeIndex(val) {
                if (val == 1) {
                    const top = localStorage.getItem('SCROLLTOP') || 0;
                    this.$nextTick(() => {
                        $('#scroll-node').scrollTop(top);
                    });
                }
            }
        },
        mounted () {
            $('#spaceHeight').height($(window).height()- 130)

            this.$refs.ReportQuestion.toolbars = this.toolbarsMav;
            this.$refs.question.toolbars = this.toolbarsMav;
            this.getQuestionList(this.me);

            $('#scroll-node').scroll(() => {
                if (this.activeIndex == 1 && !this.fullScreen) {
                    const top = $('#scroll-node').scrollTop();
                    localStorage.setItem('SCROLLTOP', top);
                }
            });


        },
        destroyed: function() {
            let self = this
            if(self.myVideo2 ){
                self.myVideo2.dispose()
            }
            if(self.myVideo3){
                 self.myVideo3.dispose()
            }
            if(self.myVideo4){
                 self.myVideo4.dispose()
            }

            //页面销毁时关闭长连接
            this.DeleteWebsockOver()
            this.over();
            localStorage.setItem('SCROLLTOP', 0);
           // clearInterval(self.tim)
        },

        methods: {

//#region 王天宇-问题答疑 方法
            //只看我的
            seeMe(){
                let self = this;
                self.questionTiwen.currentPage = 1;
                self.getQuestionList(self.me)
            },
            //返回提问列表
            backTiwenList(){
                let self = this;
                self.showTiwenList = true;
                self.getQuestionList(self.me);
            },
            //回答内容
            getHuifu(id) {
                let self = this
                self.questionDetails = false;
                self.$http.get('/tes/problemCommunication/problemDetail/'+id).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.questionDetails = true;
                        self.questionHuifu.data=res.data
                        self.questionHuifu.list=res.data.listReply
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //获取提问列表
            getQuestionList(me){
                let self = this;
                let str = 'listProblemPages';
                //只看我的
                if(me){
                    str = 'listMyProblemPages';
                }
                let pagesize = self.questionTiwen.pagesize;
                let currentPage = self.questionTiwen.currentPage;
                self.$http.get('/tes/problemCommunication/'+ str +'?pageNum='+ currentPage +'&pageSize='+pagesize + '&courseId='+self.courseId+ '&chapterId=' + self.chapterId +  '&keyWords=').then((response) => {
                    let res = response.data
                    console.log(res);
                    if(res.code == '200') {
                        self.isForbidden = res.data.forbidden
                        if(me){
                            self.questionTiwen.tiwenList = res.data.content
                            self.questionTiwen.totalCount = res.data.total
                        }
                        else{
                            self.questionTiwen.tiwenList = res.data.pageDTO.content
                            self.questionTiwen.totalCount = res.data.pageDTO.total
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //问题分页
            tiwenHandleSizeChange: function (size) {
				this.questionTiwen.pagesize = size;
			},
            //问题分页
			tiwenHandleCurrentChange: function(currentPage) {
                this.questionTiwen.currentPage = currentPage
                this.getQuestionList(this.me);
            },
            //回复提交
            submitHuifu(){
                let self = this;
                let id = self.questionHuifu.data.id;
                let cvalue = self.$refs.questionHuifu.value;
                let chtml = self.$refs.questionHuifu.getRender();
                if(cvalue == ''){
                    self.$message.error("回复内容不能为空！");
                    return;
                }
                if(cvalue.length > 5000){
                    self.$message.error("回复内容不能5000字符！");
                    return;
                }
                const loading = this.$loading({
                    lock: true,
                    text: '提交中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                console.log(cvalue,chtml);
                self.$http.post('/tes/problemCommunication/toAnswer',{
                    chapterId:self.chapterId,
                    problemId: id,
                    courseId:self.courseId,
                    answerContent:cvalue,
                    htmlContent: chtml
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '回复成功',
                            type: 'success'
                        })
                        self.getHuifu(id)

                    }else{
                        self.$message.error(res.message)
                    }
                    loading.close();
                    self.questionHuifuDialog = false;
                })
            },
            //回复弹出
            questionHuifuDialogShow(){
                let self = this;
                if (self.isForbidden) {
                    return
                }
                self.questionHuifuDialog = true;
                self.$nextTick(function(){
                    self.$refs.questionHuifu.changeVal('');
                });
            },
            //提问弹出
            questionTiwenDialogShow(){
                let self = this;
                if (self.isForbidden) {
                    return
                }
                self.questionTiwenDialog = true;
                self.questionTiwen.title = '';
                self.$nextTick(function(){
                    console.log( self.$refs.questionTiwen);
                    self.$refs.questionTiwen.changeVal('');
                });
            },
            //提问提交
            submitTiwen(){
                let self = this;
                let title = self.questionTiwen.title;
                let cvalue = self.$refs.questionTiwen.value;
                let chtml = self.$refs.questionTiwen.getRender();
                if(title == ''){
                    self.$message.error("问题标题不能为空！");
                    return;
                }
                if(cvalue == ''){
                    self.$message.error("问题描述不能为空！");
                    return;
                }
                if(title.length > 50){
                    self.$message.error("问题标题不能50字符！");
                    return;
                }
                if(cvalue.length > 5000){
                    self.$message.error("问题描述不能5000字符！");
                    return;
                }
                console.log(title,cvalue,chtml);
                console.log(self.$refs.questionTiwen);
                const loading = this.$loading({
                    lock: true,
                    text: '提交中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/problemCommunication/askQuestions',{
                    chapterId:self.chapterId,
                    problemName: title,
                    courseId:self.courseId,
                    problemContent:cvalue,
                    htmlContent: chtml
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '提交成功',
                            type: 'success'
                        })
                        self.getQuestionList(self.me);
                    }else{
                        self.$message.error(res.message)
                    }
                    loading.close();
                    self.questionTiwenDialog = false;
                })
            },
            //点击提问列表进入详情
            questionTiwenListClick(id){
                let self = this;
                self.showTiwenList = false;
                console.log(id);
                self.getHuifu(id);
            },
//#endregion 王天宇-问题答疑方法
// 王天宇 星级评分 methods
            //评分获取
            getStar(){
                let self = this;
                //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
                ///tes/course/课程id/chapter/任务id/info
                self.$http.get('/tes/course/'+ self.courseId + '/chapter/' + self.chapterId + '/info').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        console.log(res,123456);
                        self.starValue = res.data.difficultyScore-0;
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
// 王天宇 星级评分 methods end
             //小天发消息
            onmessages() {
                let hostname = window.location.host
                var target = "ws://"+hostname+"/tes/ws/experiment/course/videotime/"+this.singleChaper
                this.websock2 = new WebSocket(target);
                // this.websock2.onopen = this.websocketonopen2;
                this.websock2.onclose = this.websocketclose;
                this.over = () => {
                    this.websock2.close()
                }

            },
            websocketclose(e){  //关闭
                 console.log('断开连接',e);
            },
            websocketonopen2(){
                let actions
                if(this.stepTypeStr != '多步骤实验'){

                    actions = {
                        videoTime:this.videocurrentTime,
                        chapterId :this.singleChaper,
                        classId:this.myClassId,
                        taskId: this.chapterId,
                        courseId:this.courseId,
                        sumTime:this.videoAll,
                        isPlay:this.isPlay

                    };
                }else if(this.stepTypeStr == '多步骤实验'){

                     actions = {
                        videoTime:this.videocurrentTime,
                        chapterId :this.singleChaper,
                        classId:this.myClassId,
                        stepId: this.stepChapterId,
                        taskId: this.chapterId,
                        courseId:this.courseId,
                        sumTime:this.videoAll,
                        isPlay:this.isPlay
                    };
                }

                //请根据实际项目需要进行修改
                if(this.websock2.readyState===1 ){
                     this.websocketsend(JSON.stringify(actions));
                }

            },

            websocketsend(Data){//数据发送

                this.websock2.send(Data);
            },

            //单步骤检测
            judeFn(){
                let self = this
                self.isjudge(1,self.chapterId)
            },
            //重新检测
            Retest(){
                let self = this
                let type;
                self.stepTypeStr == '多步骤实验'? type = 2 : type = 1
                self.isjudge(type,this.stepChapterId)
            },
             //向后台传递视频时间和 总时间
            videoCount(){
                let self = this

                if(self.myVideo2){
                    self.videocurrentTime = self.myVideo2.currentTime()
                   // self.videocurrentTime = self.videocurrentTime.toFixed(1)
                    self.videoAll = self.myVideo2.duration()
                    self.videoAll = self.videoAll.toFixed(1)
                    videojs.log( self.videocurrentTime,'视频播放多少!')
                    videojs.log( self.videoAll,'视频总时间!')
                }
                if(self.myVideo3){
                    self.videoAll = self.myVideo3.duration()
                    self.videoAll = self.videoAll.toFixed(1)
                }

                if(self.myVideo4){
                    self.videocurrentTime = self.myVideo4.currentTime()
                    //self.videocurrentTime = self.videocurrentTime.toFixed(1)
                    self.videoAll = self.myVideo4.duration()
                    self.videoAll = self.videoAll.toFixed(1)
                }
                if(self.videocurrentTime >= 0.1 && !self.videostatus ){
                    self.$http.put('/tes/course/'+self.courseId+'/chapter/' +self.singleChaper+ '/statistics/' +self.myClassId+ '/experimentVideo?videotime='+self.videocurrentTime +'&stepId='+self.stepChapterId + '&sumTime='+self.videoAll+'&taskId= '+self.chapterId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }

            },
            //回到第一步
            backgo(){
                let self = this
                 $('.lastMask').css('display','none')

                self.stepListIndex = 0
                self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                self.isvideoFinish()
                self.videoCount()
                self.ManyInitManual(self.stepChapterId)
               //self.isjudge(self.stepChapterId,self.VirtualMachineId)
            },
            closeCha(){
                let self= this
                $('.lastMask').css('display','none')

                self.stepListIndex = 0
                self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                self.isvideoFinish()
                self.videoCount()
                self.ManyInitManual(self.stepChapterId)
                //self.isjudge(self.stepChapterId,self.VirtualMachineId)
            },
            //单步骤是是否有判定
            isshowjude(){
                ///tes/experiment/judge/exists?contextId='+stepId+'&contextId='+type
                let self = this
                self.$http.get('/tes/experiment/judge/exists?contextId='+self.chapterId +'&type= '+1).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        self.isflagjude = res.data.exists
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
             //判断视频是否播放完
            isvideoFinish(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/' +self.singleChaper+ '/statistics/' +self.myClassId+ '/experimentVideoFind?stepId='+self.stepChapterId + '&taskId= '+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //0 没播  1 播完
                        self.videostatus = res.data == 0? false : true
                        console.log(res.data,8988)

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化教师信息
            getClassInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.length > 0){

                            self.myClassId = res.data[0].classId;

                            if(self.stepTypeStr == '多步骤实验'){
                                //方正方法
                                self.finishStatis()
                                self.isFinish()
                                self.initSteep()

                            }
                            if(self.stepTypeStr == '单步骤实验'){
                                //方正方法
                                self.finishStatis()
                                self.isvideoFinish()
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
             //获取步骤
            initSteep(){
                let self = this
                self.$http.get('/tes/course/chapter/'+self.chapterId+'/step/list').then(response => {
                    let res = response.data


                    if(res.code == '200'){
                        if(res.data.length >0){
                            self.stepList = res.data
                            self.stepChapterId  = self.stepList[0].stepChapterId

                            self.ManyInitManual(self.stepChapterId)
                           if(self.stepTypeStr == '多步骤实验'){
                                 self.isvideoFinish()

                            }
                        }else{
                            self.ManyInitManual('')
                        }


                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //小天接口判断是否完成这个课
            isFinish(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.singleChaper+'/statistics/'+ self.myClassId+'/queryexperimentStatistics').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data == 0){
                            //没学完
                            self.finishFlag = false
                            //方正说注释
                           //self.finishStatis(0)
                        }else if(res.data == 1){
                            //学完
                            self.finishFlag = true
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

            closeMask(){
                let timer;
                clearInterval(timer)
                $('.mask-bg').css('left', '-100%')

                timer = setTimeout(()=>{
                     $('.mask').css('opacity', '0')
                     $('.mask').css('display', 'none')

                 },300)
            },
            mask(){
                $('.mask').css('opacity', '1')
                $('.mask').css('display', 'block')
                $('.mask-bg').css('left', '0')
            },
            //多任务步骤
            ManyInitManual(stepChapterId){
                let self = this
                self.experimentVideoData2 = ''
                self.laboratoryManualData = ''
                self.laboratoryTargetData = ''



                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=5&stepChapterId='+stepChapterId).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                       //手册
                       // lixin
                       if(res.data.laboratoryManual != undefined && res.data.laboratoryManual.displayVersion != undefined && res.data.laboratoryManual.displayVersion.length > 0 && res.data.laboratoryManual.displayVersion[0].htmlContent != undefined && res.data.laboratoryManual.displayVersion[0].htmlContent != '') {
                           self.laboratoryManualData = res.data.laboratoryManual.displayVersion[0].htmlContent
                           self.flaglaboratoryManualData = true
                           self.showed = res.data.laboratoryManual.showed

                       }else{
                            self.showed = res.data.laboratoryManual.showed
                            self.flaglaboratoryManualData = false

                       }

                       // 视频
                       if(res.data.experimentVideo != undefined && res.data.experimentVideo.displayVersion != undefined && res.data.experimentVideo.displayVersion.length > 0 && res.data.experimentVideo.displayVersion[0].filePath != undefined && res.data.experimentVideo.displayVersion[0].filePath != '') {
                            //self.experimentVideoData2 = 'https://www.runoob.com/try/demo_source/movie.mp4'
                            self.experimentVideoData2 = res.data.experimentVideo.displayVersion[0].filePath
                            console.log(this.myVideo2,999999)

                            this.$nextTick(()=>{
                                $('#videoSteps').css('display','block')
                                if (!self.myVideo2) {
                                    self.myVideo2 = videojs(this.$refs.videoStep, {
                                        bigPlayButton: true,
                                        textTrackDisplay: false,
                                        posterImage: true,
                                        errorDisplay: false,
                                        controls: true,
                                        preload: "auto",
                                        sources: [{
                                            type: 'video/mp4',
                                            src: self.experimentVideoData2
                                        }],
                                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                                    }, function () {
                                        //视频总时长
                                        videojs.log(this.duration(),'视频总时间!')
                                        self.videoAll = this.duration()
                                        self.videoAll = self.videoAll.toFixed(1)
                                        this.on('pause', function () {
                                            self.isPlay = '0'
                                            //暂停获得秒数
                                            self.videocurrentTime = this.currentTime()
                                            if(!self.videostatus){
                                                //999
                                                self.websocketonopen2()
                                            }
                                        // videojs.log(self.videocurrentTime,'2222!')

                                        });
                                        this.on('ended', function () { //视频播放完毕触发
                                        //  videojs.log(this.currentTime(),'11111!')
                                            //视频播放完毕获得秒数
                                            self.videocurrentTime = this.currentTime()
                                            // $('.vjs-progress-holder').css('opacity', '1')

                                        });
                                        this.on('play', function () { //视频播放
                                            self.videocurrentTime = this.currentTime()
                                            self.videoAll = this.duration()
                                            self.videoAll = self.videoAll.toFixed(1)
                                            self.isPlay = '1'
                                            if(!self.videostatus){
                                                //999
                                                self.websocketonopen2()
                                            }
                                        });

                                        this.on('error', () => {
                                            let err = this.error();
                                            console.log(err);
                                        });
                                    });
                                } else {
                                    self.myVideo2.src(self.experimentVideoData2);
                                    self.myVideo2.load(self.experimentVideoData2);
                                }
                            })
                             self.flagvideo = true
                       } else {
                           self.flagvideo = false
                           self.experimentVideoData2 = ''
                           if(self.myVideo2 != ''){
                                 self.myVideo2.load('')
                            }
                            var videoPlayer2 = $("#video").get(0);
                            if (typeof (videoPlayer2) != "undefined") {
                                var myPlayer2 = videojs('video');
                                myPlayer2.dispose();
                            }
                            //    if(this.myVideo2 != ''){
                            //        console.log(this.myVideo2,88888)
                            //        this.myVideo2.dispose()
                            //    }
                       }

                         // 目标
                        if (res.data.laboratoryTarget != undefined && res.data.laboratoryTarget.displayVersion != undefined && res.data.laboratoryTarget.displayVersion.length > 0 && res.data.laboratoryTarget.displayVersion[0].htmlContent != undefined && res.data.laboratoryTarget.displayVersion[0].htmlContent != ''){

                            self.laboratoryTargetData = res.data.laboratoryTarget.displayVersion[0].htmlContent;

                            self.flagTarget = true
                            self.$nextTick(() => {
                                $('.markdown-body p img').on('click', function(){
                                    self.biggerImgPath = $(this).attr('src')
                                    self.bigger = true
                                })
                            })
                        }else{
                            self.flagTarget = false
                        }
                        this.Fn()

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //处理逻辑
            Fn(){
                let self = this
                if(self.showed && self.flagTarget && self.stepListIndex == 0){
                     self.flagTarget = true
                }else if(!self.showed && self.flagTarget){
                    self.flagTarget = true
                }else{
                     self.flagTarget = false
                }
            },
            //统计
             finishStatis(){
                let self = this
                //原来小天的
                // self.$http.put('/tes/course/'+self.courseId+'/chapter/'+self.singleChaper+'/statistics/'+self.myClassId+'?pass='+n).then(response => {
                self.$http.put('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/statistics/'+self.myClassId).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //关闭实验
            closeLab(){
                let self = this
                if(self.DeleteWebsockOver != null){
                    self.DeleteWebsockOver()
                }

                //添加退出实验
                 self.$http.get('/tes/experiment/course/'+self.chapterId+'/stop').then(response => {
                    let res = response.data
                        if(res.code == '200'){
                            self.VirtualMachineId = ''
                            //方正说注释
                            //self.finishStatis(1)
                            //关闭页面
                             window.opener=null
                            window.close()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                })



            },
            //判定检测
            async  isjudge(type,stepId){
                let self = this
                let wetherInfo = await this.wetherInfo(type,stepId);
                if (wetherInfo.data.code == '200') {

                    //true 需要判断  false 不加判断直接下一页
                    if(wetherInfo.data.data.exists){
                        console.log(wetherInfo.data.data.exists,22222)
                        let wetherok = await self.wetherok(type,stepId);

                        //200 检测成功  500 失败
                        if(wetherok.data.code == '200'){
                            self.jude = false
                            self.$notify.success({
                                title: '检测通过',
                               // message: wetherok.data.message,
                                position: 'bottom-left',
                                offset: 100,
                                duration:3000
                            });
                            self.nextPage()
                            if(self.stepTypeStr == '单步骤实验'){
                                self.finishStatis()
                            }
                        }else if(wetherok.data.code == '500'){
                            self.jude = true
                            self.$notify.error({
                                title: '检测未通过',
                                 message: wetherInfo.data.data.skipped ? wetherok.data.message + `<p class='jump' >跳过</p>` : wetherok.data.message,
                                dangerouslyUseHTMLString: true,
                                position: 'bottom-left',
                                offset: 100,
                                duration:4000,
                                onClick(){
                                     if(wetherInfo.data.data.skipped){
                                        self.nextPage()
                                        self.jude = false
                                        $('.el-notification').css('display','none')
                                    }
                                }
                            });

                        }else if(wetherok.data.code == '500401'){
                            self.jude = true
                            self.$notify.error({
                                title: '检测未通过',
                                message: wetherInfo.data.data.skipped ? wetherok.data.message + `<p class='jump' >跳过</p>` : wetherok.data.message,
                                dangerouslyUseHTMLString: true,
                                position: 'bottom-left',
                                offset: 100,
                                duration:4000,
                                onClick(){
                                    if(wetherInfo.data.data.skipped){
                                        self.nextPage()
                                        self.jude = false
                                        $('.el-notification').css('display','none')
                                    }
                                }
                            });


                        }else{
                            self.$message.error(wetherok.data.message)
                        }
                    }else{
                        //下一页
                        if(type == 2){
                            self.saveStep(stepId)
                            //不存在实验判定
                            self.nextPage()
                        }
                    }

                }else{
                    self.$message.error(wetherInfo.data.message)
                }

            },
            //是否需要检测
            wetherInfo(type,stepId){
                return this.$http.get('/tes/experiment/judge/exists?contextId='+stepId+'&type='+type)
            },
            wetherok(type,stepId){
                return this.$http.get('/tes/experiment/judge/run?contextId='+stepId +'&containerId='+this.VirtualMachineId+'&type='+type+'&courseId='+this.courseId +'&chapterId='+this.singleChaper+'&classId='+this.classId +'&taskId='+this.chapterId)
            },
            //方正统计步骤
            saveStep(stepId){
                let self = this
                self.$http.get('/tes/course/'+this.courseId+'/saveStep?contextId='+stepId +'&containerId='+this.VirtualMachineId+'&type=2'+'&courseId='+this.courseId +'&chapterId='+this.singleChaper+'&classId='+this.classId +'&taskId='+this.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //下一页方法
            async nextPage(){
                let self = this
                if(self.stepListIndex == (self.stepList.length - 1) && self.finishFlag && this.showed){
                    self.videoCount()
                    self.stepListIndex = 0
                    self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                    await self.ManyInitManual(self.stepChapterId)
                    await self.isvideoFinish()
                }else if( self.stepListIndex == (self.stepList.length - 1) && !self.finishFlag && this.showed ){

                     $('.lastMask').css('display','block')
                    self.finishStatis()  //要打开

                    self.finishFlag = true
                    self.isvideoFinish()
                    self.videoCount()
                }else{

                    self.videoCount()
                    self.stepListIndex = self.stepListIndex + 1
                    self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                    await self.ManyInitManual(self.stepChapterId)
                    self.isvideoFinish()
                }
            },
            //上一页
            async prePage(){
                let self = this
                self.videoCount()
                self.stepListIndex = self.stepListIndex - 1
                self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                await self.ManyInitManual(self.stepChapterId)
                self.isvideoFinish()

            },
            //翻页
            page( page,event,number ){
                let self = this
                let type;
                self.stepTypeStr == '多步骤实验'? type = 2 : type = 1
                if(event.target.disabled){
                    return
                }
                if( page == 1){
                    if(self.stepListIndex == (self.stepList.length - 1) ){
                        // self.nextPage()

                        self.isjudge(type,self.stepChapterId)
                        if(number == 2){
                            self.closeVideoDialog()
                        }

                    }else{
                        //self.nextPage()
                        self.isjudge(type,self.stepChapterId)
                        if(number == 2){
                            self.closeVideoDialog()
                        }


                    }
                }else if( page == -1){
                    if(self.stepListIndex == 0){
                         $('.lastMask').css('display','block')
                         if(number == 2){
                            self.closeVideoDialog()
                        }

                    }else{
                        if(number == 2){
                            self.closeVideoDialog()
                        }

                        self.prePage()
                       // self.jude = false


                    }
                }
            },
             //yx新增需求 将文件下载能变成动态值
            AssintShow(){
                let self = this
                self.$http.get('/tes/unauthorized/internet').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                       self.downFlag = res.data

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            downloadWord(){
                let self = this;
                // 后端转PDF（待定）
                // let data = {
                //     fileName: '实验笔记.pdf',
                //     htmlStr: $("#note-editor .v-show-content").html()
                // }
                // htmlToPDF(data).then(res => {
                //     console.log(res)
                // })
                $("#note-editor .v-show-content").wordExport('实验笔记');
            },
            // 获取实验报告
            ExperimentalReport() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/report').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        console.log(res.data,55556666);
                        //临时保存置灰
                        self.onlineCommit = res.data.onlineCommit;
                        self.ReportUploadForm.fileName = res.data.reportFileName
                        if(self.ReportUploadForm.fileName){
                            self.ReportUploadForm.isUpload = true
                        }
                        self.resQuestionData = res.data

                        self.$nextTick(() => {
                            self.$refs.ReportQuestion.changeVal(res.data.reportMd)
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 二期需求更改
            // 评价
            lookAssest(){
                let self = this
                if(self.resQuestionData.checkResult){
                    self.dialogAssess = true
                }else{
                    //self.$message.error('暂无评价')
                    self.$message({
                        message: "暂无评价",
                        type: "warning"
                    });
                }

            },
            // 在线报告提交
            ReportNoteSave(tag,falg){
                // falg 区分提交与保存  0 保存 1 提交
                let self = this
                let data = {}
                if(tag == 1){
                    data = {
                        content: self.$refs.ReportQuestion.value,
                        htmlContent: self.$refs.ReportQuestion.getRender(),
                        falg: falg
                    }
                }else if(tag == 2){
                    data = {
                        content: self.$refs.ReportQuestionDialog.value,
                        htmlContent: self.$refs.ReportQuestionDialog.getRender(),
                        falg: falg
                    }
                }
                self.$http.put('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/report',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (falg == 0) {
                            self.$message({
                                message: "保存成功",
                                type: "success"
                            });
                        }else{
                            //临时保存置灰
                            self.onlineCommit = true;
                            self.$message({
                                message: "提交成功，教师未批阅之前您可以反复提交。",
                                // message: "提交成功",
                                type: "success"
                            });
                        }
                        if(tag == 2){
                            self.$refs.ReportQuestion.value = self.$refs.ReportQuestionDialog.value
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //下载修改文件名
            downloadModel() {
                let that = this;
                //console.log(that.resQuestionData.modelPath,1111);
                that.$downloadfile.download(that.resQuestionData.modelPath,"实验报告模板.doc")
            },
            //文件上传
            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePreview(file) {
                // console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning("只能上传一个文件");
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            submitUpload() {
                this.$refs.upload.submit();
                this.dialogUpload = false;
            },
            handleAvatarSuccess(res, file, fileList) {
                if (res.code === 200) {
                    this.resQuestionData.reportFileName = res.data;
                    this.$message.success("文件上传成功");
                    // this.$refs.upload.clearFiles();
                } else {
                    this.$message.error(res.message);
                }
            },
            //失败
            uploadError() {
                this.$message.error(res.message);
            },
            //上传中
            uploadProgress() {
                // this.$message("文件上传中...");
                console.log(11)
            },
            // 上传文件
            getReportFile($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                self.ReportUploadForm.fileName = $event.target.files[0]
                self.ReportUploadForm.versionFile = $event.target.files[0].name
            },
            // 上传实验报告弹窗关闭
            ReportUploadClose(){
                let self = this
                self.dialogUpload = false
                self.ReportUploadForm.versionFile = ''
                $('#report-file-upload').val('')
            },
            // 保存上传文件
            ReportUploadSave(form){
                let self = this
                if(self.ReportUploadForm.versionFile == ''){
                    self.$message.error('请上传文件')
                    return
                }
                self.contentLoading = self.$loading({
                    lock: true,
                    text: '文件上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.ReportUploadForm.fileName)
				self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/report', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '文件上传成功',
                            type: 'success'
                        })
                        self.ReportUploadForm.fileName = res.data
                        self.$refs[form].resetFields()
                        self.ReportUploadForm.isUpload = true
                        self.dialogUpload = false
                        self.contentLoading.close()
                        $('#report-file-upload').val('')
                    }else{
                        self.contentLoading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
              //全屏下的视频
            videoflag(){
                this.HandVideoDialog()
            },
            // 统计删除socket
            InitDelectWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/experiment/course/"+self.chapterId
                self.DeleteWebsock = new WebSocket(wsuri);
                self.DeleteWebsock.onopen = self.Deletewebsocketonopen;
                self.DeleteWebsock.onmessage = self.Deletewebsocketonmessage;
                self.DeleteWebsockOver = () => {
                    self.DeleteWebsock.close()
                }
            },
            Deletewebsocketonopen(){
                console.log('open sucess')
            },
            Deletewebsocketonmessage(e){ //数据接收
                const redata = JSON.parse(e.data)
                if(redata.type == 9){
                    this.dialogConfigTip = true
                }
            },
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                        // // 章节名称
                        self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化学习手册
            InitManual(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=5').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //手册

                        if(res.data.laboratoryManual != undefined && res.data.laboratoryManual.displayVersion != undefined && res.data.laboratoryManual.displayVersion.length > 0 && res.data.laboratoryManual.displayVersion[0].htmlContent != undefined && res.data.laboratoryManual.displayVersion[0].htmlContent != ''){
                            self.laboratoryManualData = res.data.laboratoryManual.displayVersion[0].htmlContent
                            self.flaglaboratoryManualData = true
                            self.showed = res.data.laboratoryManual.showed
                        }else{
                            self.showed = res.data.laboratoryManual.showed
                            self.flaglaboratoryManualData = false

                        }
                        //视频
                        if(res.data.experimentVideo != undefined && res.data.experimentVideo.displayVersion != undefined && res.data.experimentVideo.displayVersion.length > 0 && res.data.experimentVideo.displayVersion[0].filePath != undefined && res.data.experimentVideo.displayVersion[0].filePath != '') {
                             self.experimentVideoData = res.data.experimentVideo.displayVersion[0].filePath
                            // self.experimentVideoData= 'https://www.runoob.com/try/demo_source/movie.mp4'
                            this.$nextTick(()=>{
                                self.myVideo3 = videojs('videoStep3', {
                                    bigPlayButton: true,
                                    textTrackDisplay: false,
                                    posterImage: true,
                                    errorDisplay: false,
                                    controls :true,
                                    playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                                }, function onPlayerReady() {
                                    // if(!self.videostatus){
                                    //      $('.vjs-progress-holder').css('opacity', '0')
                                    // }else{
                                    //     $('.vjs-progress-holder').css('opacity', '1')
                                    // }
                                    //视频总时长
                                    videojs.log(this.duration(),'视频总时间!')
                                    self.videoAll = this.duration()
                                    self.videoAll = self.videoAll.toFixed(1)
                                    this.on('pause', function () {
                                        //暂停获得秒数
                                        self.videocurrentTime = this.currentTime()
                                       // self.videocurrentTime  = self.videocurrentTime.toFixed(1)
                                       // videojs.log(self.videocurrentTime,'2222!')
                                       self.isPlay = '0'
                                       self.isvideoFinish()
                                       self.videoCount()
                                       if(!self.videostatus){
                                            //999
                                            self.websocketonopen2()
                                        }

                                    });
                                    this.on('ended', function () { //视频播放完毕触发
                                      //  videojs.log(this.currentTime(),'11111!')
                                        //视频播放完毕获得秒数
                                        self.videocurrentTime = this.currentTime()
                                        // $('.vjs-progress-holder').css('opacity', '1')


                                    });
                                     this.on('play', function () { //视频播放
                                        self.videoAll = this.duration()
                                         self.videocurrentTime = this.currentTime()
                                         self.isPlay = '1'
                                        self.videoAll = self.videoAll.toFixed(1)
                                        if(!self.videostatus){
                                            //999
                                            self.websocketonopen2()
                                            //  this.tim = setInterval(() => {
                                            //     console.log('yangxu')
                                            // }, 2000);

                                        }
                                    });

                                });
                                self.myVideo3.src(self.experimentVideoData)
                                self.myVideo3.load(self.experimentVideoData)
                            })

                            self.flagvideo = true
                        }else{
                            self.flagvideo = false
                        }
                        // 新增实验目标

                        if (res.data.laboratoryTarget != undefined && res.data.laboratoryTarget.displayVersion != undefined && res.data.laboratoryTarget.displayVersion.length > 0 && res.data.laboratoryTarget.displayVersion[0].htmlContent != undefined && res.data.laboratoryTarget.displayVersion[0].htmlContent != ''){
                            self.laboratoryTargetData = res.data.laboratoryTarget.displayVersion[0].htmlContent
                             self.flagTarget = true
                        }else{
                              self.flagTarget = false
                        }
                        self.$nextTick(() => {
                            $('.markdown-body p img').on('click', function(){
                                self.biggerImgPath = $(this).attr('src')
                                self.bigger = true
                            })
                        })
                        this.Fn()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            // 配置虚拟机
            DialogConfigTip(){
                let self = this
                self.MachineNavTabIndex = 0
                self.dialogCloseShare = false
                self.dialogInitVirtual = false
                self.dialogConfigTip = false
                self.dialogShareDesktop = false
                self.dialogScreenshot = false
                self.dialogHandbook = false
                self.dialogVideoDrag = false
                self.dialogHandbookDrag = false
                self.dialogtargetDrag = false
                self.dialogHandNoteDrag = false
                self.dialogDownload = false
                self.dialogSftp = false
                self.dialogCut = false
                self.dialogFileUpload = false
                self.dialogCloseShare = false
                self.dialogDisplayHide = false
                self.dialogDistributionFormVisible = false
                self.dialogUpload = false
                self.dialogReportDrag = false
                self.InitExperiment(0)
            },
            // 初始化进入实验
            InitExperiment(index){
                // index 虚机index
                let self = this
                self.fullScreen = false

                self.deskLoading = true
                self.deskLoadingText = '桌面加載中'
                self.VirtualMachineUrl = ''
                self.VirtualMachineUrlArr = []
                // 清空虚机切换列表导航集合
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.$http.get('/tes/experiment/course/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.mirrorIframeTip = false
                        // 初始化虚拟机信息
                        self.VirtualMachineInfo = res.data

                        // setTimeout(() => {
                        //     self.iframeHeight = $(window).height() - 60
                        //     $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                        //     $('.jx-virtual-machine-main').height(self.iframeHeight)
                        //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        // }, 800);


                        // 虚机容器ID
                        self.VirtualMachineId = res.data.containers[index].containerId

                        self.fullScreen = false
                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){
                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            // self.virtualMachineNavList.push(res.data.containers[i].containerRole)
                            // 如果含有全屏状态
                            // if(res.data.containers[i].fullScreen){
                            //     fullData.push(res.data.containers[i].containerId)
                            //     self.VirtualFullScreen(1,fullData)
                            // }
                            fullData.push(res.data.containers[i].containerId)
                        }
                        if (res.data.containers[0].fullScreen  && res.data.type == 1) {
                            self.VirtualFullScreen(1,fullData)
                        }
                        if (res.data.type == 2) {
                            self.fullScreen = true
                            $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                            setTimeout(() => {
                                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                                 $('.mirror-iframe').width($(".step-main-mirror").width() - 48)
                                 $('.mirror-iframe').css('margin-left','20px')
                                 $('.iframs').css('margin-left','25px')
                            }, 1000);
                        } else {
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60
                                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                                $('.jx-virtual-machine-main').height(self.iframeHeight)
                                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                            }, 800);
                        }
                        setTimeout(() => {
                            // 虚机地址默认设置主节点
                            self.VirtualMachineUrl = res.data.containers[index].desktopUrl || res.data.containers[index].notebookUrl

                            // 虚机地址数组
                            self.VirtualMachineUrlArr = res.data.containers

                            if(self.VirtualMachineUrlArr.length > 0){
                                self.InitDelectWebSocket()
                            }
                            self.deskLoading = false
                            if(self.ScreenSigma < 1.44){
                                self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                    closeOnClickModal: false
                                }).then(() => {
                                    $('.tops').css('width','auto')
                                    self.VirtualFullScreen(2)
                                })
                            }
                        }, 800);
                    }else{
                        // self.deskLoading = false
                        // self.$message.error(res.message)
                        // 错误提示
                        self.mirrorIframeTip = true
                        self.mirrorIframeTipText = res.message
                        self.deskLoading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // tab切换
            MachineNavTab(index) {
                let self = this
                if(index == 3){
                    self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/notes?notesType=3').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$refs.question.value = res.data
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
                self.activeIndex = index
            },
            // 实验笔记保存
            NoteSave(tag){
                // tag 1. 左侧实验手册2.实验手册弹窗
                let self = this
                let data = {}
                if(tag == 1){
                    data.notesType = 3
                    data.pageNumber = 1
                    data.content = self.$refs.question.value
                    if (self.$refs.question.value == '') {
                        self.$message.error('请填写实验笔记')
                        return
                    }
                }else if(tag == 2){
                    data.notesType = 3
                    data.pageNumber = 1
                    data.content = self.$refs.HandNoteDialog.value
                    if (self.$refs.HandNoteDialog.value == '') {
                        self.$message.error('请填写实验笔记')
                        return
                    }
                }
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/notes', data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '学习笔记保存成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 虚机导航列表切换
            MachineNavTab2(index,item){
                let self = this
                self.MachineNavTabIndex = index

                self.VirtualMachineId = item.containerId
                // 重新初始化进入实验
                // self.InitExperiment(index, true)

                self.$http.get('/tes/experiment/share/switch/'+self.chapterId+'?number='+(index+1)).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 刷新虚机
            refreshVirtual(index){
                let self = this
                self.MachineNavTabIndex = index
                // 关闭手册拖拽弹窗
                self.dialogHandbookDrag = false
                self.dialogtargetDrag = false
                self.dialogHandNoteDrag = false
                self.dialogVideoDrag = false
                self.dialogReportDrag = false
                // 重新初始化进入实验
                // self.InitExperiment(index)
                self.deskLoading = true
                self.deskLoadingText = '桌面加載中'
                self.VirtualMachineUrl = ''
                self.VirtualMachineUrlArr = []
                // 清空虚机切换列表导航集合
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.$http.get('/tes/experiment/course/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.mirrorIframeTip = false
                        // 初始化虚拟机信息
                        if(res.data.containers[0].fullScreen  || (res.data.type == 2 && self.fullScreen)){
                            self.fullScreen = true;
                             //把距离加上
                            $('.mirror-iframe').css('margin-left','45px')
                        }
                        // 初始化虚拟机信息
                        self.VirtualMachineInfo = res.data
                        // 虚机地址默认设置主节点
                        self.VirtualMachineUrl = res.data.containers[index].desktopUrl || res.data.containers[index].notebookUrl

                        // 虚机地址数组
                        self.VirtualMachineUrlArr = res.data.containers
                        // 虚机容器ID
                        self.VirtualMachineId = res.data.containers[index].containerId

                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){
                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            // self.virtualMachineNavList.push(res.data.containers[i].containerRole)
                            // 如果含有全屏状态
                            // if(res.data.containers[i].fullScreen){
                            //     fullData.push(res.data.containers[i].containerId)
                            //     self.VirtualFullScreen(1,fullData)
                            // }
                            fullData.push(res.data.containers[i].containerId)
                        }
                        if(!res.data.containers[0].fullScreen  && res.data.type == 1){
                            self.fullScreen = false;
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60;
                                $(".mirror-iframe, .step-main-mirror").width(
                                1024 / 768 * ($(window).height() - 60)
                                );
                                $(".jx-virtual-machine-main").height(self.iframeHeight);
                                $(".step-main-content").width(
                                $(window).width() - $(".step-main-mirror").width()
                                );
                                //把距离去掉
                                $('.mirror-iframe').css('margin-left','0')
                                $('.iframs').css('margin-left','0')
                            }, 800);
                        }
                        if (res.data.type == 2) {
                            if (self.fullScreen) {
                                $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                                setTimeout(() => {
                                    // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                                    $('.mirror-iframe').width($(".step-main-mirror").width() - 48)
                                    $('.mirror-iframe').css('margin-left','20px')
                                    $('.iframs').css('margin-left','25px')
                                }, 1000);
                            } else {
                                setTimeout(() => {
                                    self.iframeHeight = $(window).height() - 60;
                                    $(".mirror-iframe, .step-main-mirror").width( 1024 / 768 * ($(window).height() - 60));
                                    $(".jx-virtual-machine-main").height(self.iframeHeight);
                                    $(".step-main-content").width($(window).width() - $(".step-main-mirror").width());
                                    //把距离去掉
                                    $('.mirror-iframe').css('margin-left','0')
                                    $('.iframs').css('margin-left','0')
                                }, 1000);
                            }
                        }
                        self.deskLoading = false;
                    }else{
                        self.mirrorIframeTip = true
                        self.mirrorIframeTipText = res.message
                        self.deskLoading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化虚机
            InitVirtual() {
                let self = this
                self.dialogInitVirtual = true
            },
            DialogInitVirtualSave(index){
                let self = this
                // 关闭拖拽弹窗
                self.dialogHandbookDrag = false
                self.dialogtargetDrag = false
                self.dialogHandNoteDrag = false
                self.dialogVideoDrag = false
                self.dialogReportDrag = false

                self.MachineNavTabIndex = 0
                self.VirtualMachineUrl = ''
                self.VirtualMachineUrlArr = []
                self.VirtualMachineIdArr = []
                // self.virtualMachineNavList = []
                self.fullScreen = false

                self.dialogInitVirtual = false
                self.deskLoading = true
                self.deskLoadingText = '初始化中'
                self.$http.get('/tes/experiment/course/'+self.chapterId+'/init').then(response => {
                    let res = response.data
                    // self.virtualMachineNavList = []
                    if(res.code == '200'){
                        self.mirrorIframeTip = false
                        // 初始化虚拟机信息
                        self.VirtualMachineInfo = res.data
                        // setTimeout(() => {
                        //     self.iframeHeight = $(window).height() - 60
                        //     $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                        //     $('.jx-virtual-machine-main').height(self.iframeHeight)
                        //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        //     //把距离去掉
                        //     $('.mirror-iframe').css('margin-left','0')
                        //     $('.iframs').css('margin-left','0')
                        // }, 800);



                        // 虚机ID
                        self.VirtualMachineId = res.data.containers[index].containerId

                        // 镜像ID初始化
                        // self.VirtualImageId = res.data[index].imageId
                        let fullData = []
                        for(let i = 0; i < res.data.containers.length; i++){

                            self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
                            // 虚机切换列表导航集合
                            // self.virtualMachineNavList.push(res.data.containers[i].containerRole)
                            // 如果含有全屏状态
                            if(res.data.containers[i].fullScreen  && res.data.type == 1){
                                fullData.push(res.data.containers[i].containerId)
                                self.VirtualFullScreen(1,fullData)
                            }
                        }
                        if (res.data.type == 2) {
                            self.fullScreen = true
                            $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                            setTimeout(() => {
                                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                                 $('.mirror-iframe').width($(".step-main-mirror").width() - 48)
                                 $('.mirror-iframe').css('margin-left','20px')
                                 $('.iframs').css('margin-left','25px')
                            }, 1000);
                        } else {
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60
                                $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                                $('.jx-virtual-machine-main').height(self.iframeHeight)
                                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                                //把距离去掉
                                $('.mirror-iframe').css('margin-left','0')
                                $('.iframs').css('margin-left','0')
                            }, 800);
                        }
                        // self.deskLoading = false

                        // if(self.ScreenSigma < 1.44){
                        //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                        //         confirmButtonText: '确定',
                        //         cancelButtonText: '取消',
                        //         type: 'warning',
                        //         closeOnClickModal: false
                        //     }).then(() => {
                        //         self.VirtualFullScreen(2)
                        //     })
                        // }
                        setTimeout(() => {
                            // 虚机地址默认设置主节点
                            self.VirtualMachineUrl = res.data.containers[index].desktopUrl || res.data.containers[index].notebookUrl

                            self.VirtualMachineUrlArr = res.data.containers
                            self.deskLoading = false
                            self.$message({
                                type: 'success',
                                message: '初始化成功!'
                            })
                            if(self.ScreenSigma < 1.44){
                                self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                    closeOnClickModal: false
                                }).then(() => {
                                    $('.tops').css('width','auto')
                                    self.VirtualFullScreen(2)
                                })
                            }
                        }, 5000);
                    }else{
                        setTimeout(() => {
                            self.iframeHeight = $(window).height() - 60
                            $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                            $('.jx-virtual-machine-main').height(self.iframeHeight)
                            $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        }, 800);
                        self.mirrorIframeTip = true
                        self.mirrorIframeTipText = res.message
                        self.deskLoading = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 全屏
            VirtualFullScreen(index,fullData){
                let self = this
                const loading = self.$loading({
                    lock: true,
                    text: '虚机切换中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let data = {}
                if(index == 1){
                    data = {
                        containerIds: fullData,
                        length: '1024',
                        width: '768',
                        fullScreen: false,
                        contextId: self.chapterId
                    }
                }else if(index == 2){
                    //变为全屏
                    data = {
                        containerIds: self.VirtualMachineIdArr,
                        length: window.screen.availWidth - 60,
                        width: self.iframeHeight,
                        fullScreen: true,
                        contextId: self.chapterId
                    }
                }else if(index == 3){
                    self.fullScreen = false
                    // 关闭手册拖拽弹窗
                    self.dialogHandbookDrag = false
                    self.dialogtargetDrag = false
                    self.dialogHandNoteDrag = false
                    self.dialogVideoDrag = false
                    self.dialogReportDrag = false
                    // 退出全屏
                    data = {
                        containerIds: self.VirtualMachineIdArr,
                        length: '1024',
                        width: '768',
                        fullScreen: false,
                        contextId: self.chapterId
                    }
                }
                self.$http.post('/tes/experiment/container/display',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 关闭loading
                        loading.close()
                        if(index == 2){
                            self.fullScreen = true
                            $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                            setTimeout(() => {
                                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                                 $('.mirror-iframe').width($(".step-main-mirror").width() - 48)
                                 $('.iframs').css('margin-left','25px')
                                 $('.mirror-iframe').css('margin-left','20px')
                            }, 100);
                        }else if(index == 3 || index == 1){
                            self.fullScreen = false
                            setTimeout(() => {
                                self.iframeHeight = $(window).height() - 60
                                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                                $('.jx-virtual-machine-main').height(self.iframeHeight)
                                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                                $('.mirror-iframe').css('margin-left','0')
                                 $('.iframs').css('margin-left','0')
                            }, 300);
                        }
                        //关闭视频播放
                        if(self.myVideo2){
                            self.myVideo2.pause();
                        }else if(self.myVideo3){
                            self.myVideo3.pause();
                        }else if(self.myVideo4){
                            self.myVideo4.pause();
                        }
                        // 关闭视频播放
                        // let myVideo = document.getElementById('experiment-video');   //获取视频video
                        // if(myVideo){
                        //     if (!myVideo.paused){
                        //         myVideo.pause();
                        //     }
                        // }


                    }else{
                        // 关闭loading
                        loading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 下载文件
            DownloadFile() {
                let self = this
                self.dialogDownload = true
            },
            // 下载文件确定
            DownloadSave() {
                let self = this
                self.dialogDownload = false
                const loading = self.$loading({
                    lock: true,
                    text: '正在下载',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.get('/tes/experiment/course/'+self.chapterId+'/zip') .then((response) => {
                    let res = response.data
                    if(res.code == 200){
                        loading.close()
                        // self.DownLoadZip()
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href =  '/tes/experiment/course/'+self.chapterId+'/download';
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })

            },
            DownLoadZip(){
                let self = this
                self.$http.get('/tes/experiment/course/'+self.chapterId+'/download',
                    {responseType: 'blob'}) .then((response) => {
                    let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                    var str = response.headers['content-disposition']
                    str = str.match(/''(\S*?).zip/)[1]
                    let fileName = decodeURI(str)+'.zip'
                    let url = window.URL.createObjectURL(blob);
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = '/tes/experiment/course/'+self.chapterId+'/download';
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                }).catch(err => {
                      console.log(err)
                })
            },
            // 查询NoteBook镜像列表
            getImageList(is_notebook) {
                 this.$http.get('/tes/image-allocation/image?cluster=false&notebook='+is_notebook ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.distributionform.options0 = res.data
                    }else{
                        this.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 选择实验类型
            experimentTypeChange(e) {
                this.distributionform.resource = 1
                this.distributionform.distributedData.cpuValue = ''
                this.distributionform.distributedData.ramValue = ''
                // this.distributionform.distributedData.switchValue = false
                this.distributionform.mirrorConfigData.cpuValue = ''
                this.distributionform.mirrorConfigData.ramValue = ''
                this.distributionform.mirrorConfigData.switchValue = false
                this.distributionform.nodeMianData.cpuValue = ''
                this.distributionform.nodeMianData.ramValue = ''
                this.distributionform.optionsValue0 = [];
                this.distributionform.optionsValue1 = [];
                this.distributionform.optionsValue2 = [];
                this.distributionform.optionsValue3 = [];
                this.distributionform.optionsValue4 = [];
                this.distributionform.optionsValue5 = [];
                this.distributionform.optionsValue6 = [];
                this.distributionform.optionsValue7 = [];
                this.distributionform.virtualStepCurrent = 1;
                this.distributionform.distributionData = '';
                let type = e==1 ? false : true;
                this.getImageList(type);
            },
            // 跳转到编辑实验镜像页
            VirtualLink() {
                let self = this
                // self.distributionform.resource = 1
                // let cluster = self.distributionform.resource == 1 ? false : true
                self.getImageList(false);
                self.$http.get('/tes/image-allocation/image?cluster=true&notebook=false').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.distributionform.options1 = res.data
                        self.distributionform.options2 = res.data
                        self.distributionform.options3 = res.data
                        self.distributionform.options4 = res.data
                        self.distributionform.options5 = res.data
                        self.distributionform.options6 = res.data
                        self.distributionform.options7 = res.data

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                self.dialogDistributionFormVisible = true
                self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+self.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.allocated){
                            self.distributionform.experimentType = res.data.type;
                            //获取可视化实验单节点/notebook实验镜像列表
                            if (res.data.type == 2) {
                                self.getImageList(true);
                            }
                            if(res.data.mode == 1){
                                self.distributionform.resource = res.data.mode
                                // 伪分布取值
                                self.distributionform.distributedData.cpuValue = res.data.cpu
                                self.distributionform.distributedData.ramValue = res.data.ram
                                // self.distributionform.distributedData.switchValue = res.data.gpu

                                self.distributionform.optionsValue0 = [res.data.image.imageSource,res.data.image.imageId]
                                self.handleItemChange(self.distributionform.optionsValue0)
                            }else if(res.data.mode == 2){
                                self.distributionform.resource = res.data.mode
                                // 主节点取值
                                self.distributionform.nodeMianData.cpuValue = res.data.cpu
                                self.distributionform.nodeMianData.ramValue = res.data.ram
                                self.distributionform.nodeMianData.switchValue = res.data.gpu

                                self.distributionform.optionsValue7 = [res.data.image.imageSource,res.data.image.imageId]
                                // 从节点镜像配置
                                self.distributionform.mirrorConfigData.cpuValue = res.data.slaveCpu
                                self.distributionform.mirrorConfigData.ramValue = res.data.slaveRam
                                self.distributionform.mirrorConfigData.switchValue = res.data.slaveGpu
                                self.distributionform.virtualStepCurrent = res.data.slaveSize
                                self.$nextTick(() => {
                                    if(res.data.slaveSize == 1){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                    }else if(res.data.slaveSize == 2){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                    }else if(res.data.slaveSize == 4){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                    }else if(res.data.slaveSize == 6){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                        self.distributionform.optionsValue5 = [res.data.slaveImages[4].imageSource, res.data.slaveImages[4].imageId]
                                        self.distributionform.optionsValue6 = [res.data.slaveImages[5].imageSource, res.data.slaveImages[5].imageId]
                                    }
                                })
                                self.handleItemChange(self.distributionform.optionsValue7)
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //弹窗step切换
            AddClass(index){
                let self = this
                // if(index != 2){
                //     return
                // }
                self.distributionform.virtualStepCurrent = index
            },
            // 分配镜像
            // 表单提交
            DistributionFormSave(formName, tag){
                // tag标记1.保存 2.保存并跳转实验镜像
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}, slaveImageIdsArr = []
                        // data.chapterIds = self.chapterId
                        data.mode = self.distributionform.resource
                        data.experimentType = self.distributionform.experimentType
                        if(self.distributionform.resource == 1){
                            data.imageId = self.distributionform.optionsValue0[1] ? self.distributionform.optionsValue0[1] : ''
                            data.cpu = self.distributionform.distributedData.cpuValue
                            data.ram = self.distributionform.distributedData.ramValue
                            // data.gpu = self.distributionform.distributedData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择镜像')
                                return
                            }
                        }else if(self.distributionform.resource == 2){
                            data.imageId = self.distributionform.optionsValue7[1] ? self.distributionform.optionsValue7[1] : ''
                            data.cpu = self.distributionform.nodeMianData.cpuValue
                            data.ram = self.distributionform.nodeMianData.ramValue
                            data.gpu = self.distributionform.nodeMianData.switchValue
                            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
                            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
                            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择主节点镜像')
                                return
                            }

                            if (self.distributionform.virtualStepCurrent == 1) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 2) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 4) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 6) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
                                if (self.distributionform.optionsValue5[1] == undefined) {
                                    self.$message.error('请选择从节点5镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
                                if (self.distributionform.optionsValue6[1] == undefined) {
                                    self.$message.error('请选择从节点6镜像')
                                    return
                                }
                            }
                            data.slaveImageIds = slaveImageIdsArr
                        }
                        self.$http.post('/tes/image-allocation/course/'+self.chapterId, data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                // self.$message({
                                //     message: '重选配置成功',
                                //     type: 'success'
                                // })

                                // 镜像分配弹窗隐藏
                                self.dialogDistributionFormVisible = false
                                // 配置成功调用刷新
                                //self.InitConfigVirtual(0)
                                self.refreshVirtual(0)
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            },
            InitConfigVirtual(index){
                let self = this
                self.MachineNavTabIndex = 0
                self.VirtualMachineUrl = ''
                // 虚机地址数组
                self.VirtualMachineUrlArr = []
                self.VirtualMachineIdArr = []
                self.virtualMachineNavList = []
                self.fullScreen = false
                self.deskLoading = true
                self.deskLoadingText = '重选配置中'
                self.$http.get('/tes/experiment/course/'+self.chapterId+'/init').then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        // 初始化虚拟机信息
                        // self.VirtualMachineInfo = res.data

                        setTimeout(() => {
                            self.iframeHeight = $(window).height() - 60
                            $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
                            $('.jx-virtual-machine-main').height(self.iframeHeight)
                            $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                        }, 800);
                        self.deskLoading = false

                        // 虚机地址默认设置主节点
                        self.VirtualMachineUrl = res.data[index].desktopUrl
                        // 虚机地址数组
                        self.VirtualMachineUrlArr = res.data
                        // 虚机ID
                        self.VirtualMachineId = res.data[index].containerId

                        // 镜像ID初始化
                        self.VirtualImageId = res.data[index].imageId
                        let fullData = []
                        for(let i = 0; i < res.data.length; i++){
                            self.VirtualMachineIdArr.push(res.data[i].containerId)
                            // 虚机切换列表导航集合
                            self.virtualMachineNavList.push(res.data[i].containerRole)
                            // 如果含有全屏状态
                            if(res.data[i].fullScreen){
                                fullData.push(res.data[i].containerId)
                                self.VirtualFullScreen(1,fullData)
                            }
                        }
                        self.$message({
                            message: '重选配置成功',
                            type: 'success'
                        })
                    }else{
                        self.deskLoading = false
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            handleItemChange(data) {
                let self = this
                if(data[1]){
                    self.$http.get('/tes/image-allocation/image/'+data[1]).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.distributionform.distributionData = res.data
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            },
            // stfp工具
            SftpConfig() {
                let self = this
                self.$http.get('/tes/experiment/container/'+self.VirtualMachineId+'/ftp').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        let sftpArr = res.data.split('@')
                        self.sftpIp = sftpArr
                        self.sftpPort = self.sftpIp[0].split(':')
                        self.dialogSftp = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 二期需求
            // 初始化剪切板开关状态
            initClipboarFalg(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/ClipboardFalg').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.CutSwitch = res.data == 0 ? false : true

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 剪贴板字符限制
            CutContentInput(){
                let self = this
                let MirrorTextLength = self.cutData.cutRuleForm.desc.length
                self.cutData.cutRuleForm.descNum = 20000 - MirrorTextLength
            },
            // 剪切板弹窗
            CutDialog(){
                let self = this

                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/ClipboardFalg').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         self.CutSwitch = res.data == 0 ? false : true
                         if(self.CutSwitch){
                            self.$message.error('剪切板功能已被禁止使用')
                            return
                        }
                        self.dialogCut = true
                        self.cutData.cutRuleForm.descNum = 20000
                        self.cutData.cutRuleForm.desc = ''
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            CutCloseDialog(){
                let self = this
                self.$refs['cutRuleForm'].resetFields()
            },
             //隐藏弹窗
            VirtualClose(){
                this.dialogVirtualFloag = false
            },
            // 剪切板表单提交
            cutSubmitForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        const loading = self.$loading({
                            lock: true,
                            text: '剪切文件提交中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/experiment/container/'+self.VirtualMachineId+'/clipboard',{
                            content: self.cutData.cutRuleForm.desc,
                            contextId: self.chapterId
                        },{ timeout:5000}).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                loading.close()
                                self.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                self.dialogCut = false
                            }else{
                                loading.close()
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                            //显示弹窗
                            this.dialogVirtualFloag = true
                            loading.close()
                            self.dialogCut = false
                        })
                    }
                })
            },
            // 文件上传清除上传提示文本
            CloseFileUploadDialog(){
                let self = this
                self.FileUploadForm.fileName = ''
                self.FileUploadForm.versionFile = ''
                $('#version-file-upload').val('')
            },
            // 文件上传弹窗显示
            UploadFile(){
                let self = this
                self.FileUploadForm.fileName = ''
                self.FileUploadForm.versionFile = ''
                self.dialogFileUpload = true
                $('#version-file-upload').val('')
            },
            // 上传文件
            getFile($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                self.FileUploadForm.fileName = $event.target.files[0]
                self.FileUploadForm.versionFile = $event.target.files[0].name
            },
            // 保存上传文件
            UploadSave(form){
                let self = this
                if(self.FileUploadForm.fileName == ''){
                    self.$message.error('请上传文件')
                    return
                }
                self.contentLoading = self.$loading({
                    lock: true,
                    text: '文件上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.FileUploadForm.fileName)
				self.$http.post('/tes/experiment/container/'+self.VirtualMachineId+'/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.dialogFileUpload = false
                        self.contentLoading.close()
                        self.$refs[form].resetFields()
                    }else{
                        self.contentLoading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

            // 分享桌面
            ShareDesk() {
                let self = this
                self.ShareDeskData.newOptions = [
                    {
                        value: '全选',
                        label: '全选'
                    }
                ]
                self.ShareDeskData.shareValue = []
                self.$http.get('/tes/experiment/share/'+self.chapterId+'/users').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.length == 0) {
                            self.ShareDeskData.newOptions = []
                        }
                        for(let i = 0; i < res.data.length; i++){
                            let shareJson = {}
                            shareJson.label = res.data[i].username
                            shareJson.value = res.data[i].userId
                            self.ShareDeskData.newOptions.push(shareJson)
                        }
                        self.dialogShareDesktop = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            DELONE(str, arr){
                let index = arr.indexOf(str)
                arr.splice(index,1)
                return arr
            },

            // 分享保存
            ShareSave(){
                let self = this

                let newOptions = self.ShareDeskData.shareValue
                if(self.ShareDeskData.shareValue.length > 1){
                    let index = newOptions.indexOf('全选')
                    newOptions.splice(index,1)
                }

                self.$http.post('/tes/experiment/share/'+self.chapterId,{
                    users: newOptions,
                    controllable: self.ShareDeskData.shareRadio
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '分享成功',
                            type: 'success'
                        })
                        self.dialogShareDesktop = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 分享全选
            selectAll(val){
                let self = this
                let allValues = []

                //保留所有值
                for (let item of self.ShareDeskData.newOptions) {
                    allValues.push(item.value)
                }
                // 用来储存上一次的值，可以进行对比
                const oldVal = self.ShareDeskData.oldOptions.length === 1 ? [] : self.ShareDeskData.oldOptions[1]

                // 若是全部选择
                if (val.includes('全选')) self.ShareDeskData.shareValue = allValues

                // 取消全部选中  上次有 当前没有 表示取消全选
                if (oldVal.includes('全选') && !val.includes('全选')) self.ShareDeskData.shareValue = []

                // 点击非全部选中  需要排除全部选中 以及 当前点击的选项
                // 新老数据都有全部选中
                if (oldVal.includes('全选') && val.includes('全选')) {
                    const index = val.indexOf('全选')
                    val.splice(index, 1) // 排除全选选项
                    self.ShareDeskData.shareValue = val
                }

                //全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
                if (!oldVal.includes('全选') && !val.includes('全选')) {
                    if (val.length === allValues.length - 1) self.ShareDeskData.shareValue = ['全选'].concat(val)
                }

                //储存当前最后的结果 作为下次的老数据
                self.ShareDeskData.oldOptions[1] = self.ShareDeskData.shareValue
            },
            // 关闭分享
            CloseShare(){
                let self = this
                self.dialogCloseShare = true
            },
            DialogCloseShareSave(){
                let self = this
                self.$http.get('/tes/experiment/share/'+self.chapterId+'/close').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.dialogCloseShare = false
                        self.$message({
                            message: '关闭成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 跳转分享虚机
            NotesLink(item) {
                let self = this
                let newWindow = window.open()
                let routeData = self.$router.resolve({
                    name: "ShareVirtualMachine",
                    query: {
                        courseId: item.userId,
                        chapterId: item.chapterId
                    }
                })
                window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
            },
            // 关闭分享共享虚机信息
            CloseNotes(item,index){
                let self = this
                self.$http.delete('/tes/experiment/share/'+item.userId+'/'+item.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.notesData.splice(index, 1)
                        if(self.notesData.length == 0){
                            self.noteBottom = -172
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 实验截图
            ExperimentScreenshot(){
                let self = this
                var vir = document.getElementById('VirtualMachineIframe' + self.VirtualMachineId)
                self.dialogScreenshotUrl = self.convertCanvasToImage(vir.contentWindow.document.getElementsByTagName('canvas')[0]).getAttribute("src")

                self.$http.post('/tes/base64/file-save',{
                    'base64Info' : self.dialogScreenshotUrl
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.dialogScreenshotCopyUrl = res.data
                        self.dialogScreenshot = true
                    }
                })
            },
            convertCanvasToImage(canvas) {
                let image = new Image();
                image.crossOrigin = "anonymous";
                image.src = canvas.toDataURL("image/png");
                return image;
            },
            // 实验截图复制
            dialogScreenshotCopy() {
                let self = this
                var clipboard = new self.Clipboard('.dialog-screenshot .button-style')
                clipboard.on('success', e => {
                    self.$message({
                        message: '复制成功，请在编辑器粘贴',
                        type: 'success'
                    })
                    self.dialogScreenshot = false
                    e.clearSelection();
                })
                clipboard.on('error', e => {
                    // 不支持复制
                    console.log('该浏览器不支持自动复制')
                    // 释放内存
                    clipboard.destroy()
                })
            },
            // 实验截图保存下载图片
            dialogScreenshotSave() {
                let self = this
                self.downloadFile('截图.png', self.dialogScreenshotUrl);
            },
            // 下载
            downloadFile(fileName, content) {
                let aLink = document.createElement('a');
                let blob = this.base64ToBlob(content); //new Blob([content]);

                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                aLink.download = fileName;
                aLink.href = URL.createObjectURL(blob);

                // aLink.dispatchEvent(evt);
                aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            },
            // base64转blob
            base64ToBlob(code) {
                let parts = code.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;

                let uInt8Array = new Uint8Array(rawLength);

                for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {type: contentType});
            },

            // 学生手册弹窗
            HandbookDialog(){
                let self = this
                self.dialogHandbookDrag = true
                self.$nextTick(() => {
                    $('.markdown-body p img').on('click', function(){
                        self.biggerImgPath = $(this).attr('src')
                        self.bigger = true
                    })
                })
            },
            // 学生目标
            TargetDialog(){
                let self = this
                self.dialogtargetDrag = true
                self.$nextTick(() => {
                    $('.markdown-body p img').on('click', function(){
                        self.biggerImgPath = $(this).attr('src')
                        self.bigger = true
                    })
                })
            },
            // 视频拖拽弹窗
            HandVideoDialog( ){
                let self = this
                self.dialogVideoDrag = true
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=5&stepChapterId='+self.stepChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.experimentVideo != undefined && res.data.experimentVideo.displayVersion != undefined && res.data.experimentVideo.displayVersion.length > 0 && res.data.experimentVideo.displayVersion[0].filePath != undefined && res.data.experimentVideo.displayVersion[0].filePath != '') {

                           // self.experimentVideoData3 = 'https://www.runoob.com/try/demo_source/movie.mp4'
                            self.experimentVideoData3 = res.data.experimentVideo.displayVersion[0].filePath
                            this.$nextTick(()=>{
                                self.myVideo4 = videojs('videoStep33', {
                                    bigPlayButton: true,
                                    textTrackDisplay: false,
                                    posterImage: true,
                                    errorDisplay: false,
                                    controls :true,
                                    playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                                }, function onPlayerReady() {

                                    //视频总时长
                                    videojs.log(this.duration(),'视频总时间!')
                                    self.videoAll = this.duration()
                                    self.videoAll = self.videoAll.toFixed(1)
                                    this.on('pause', function () {
                                        //暂停获得秒数
                                        self.videocurrentTime = this.currentTime()
                                        self.videoCount()
                                        self.isPlay = '0'
                                        if(!self.videostatus){
                                             //999
                                            self.websocketonopen2()
                                        }
                                    });
                                    this.on('ended', function () { //视频播放完毕触发

                                        //视频播放完毕获得秒数
                                        self.videocurrentTime = this.currentTime()

                                    });
                                    this.on('play', function () { //视频播放
                                        self.videocurrentTime = this.currentTime()
                                        self.videoAll = this.duration()
                                        self.videoAll = self.videoAll.toFixed(1)
                                         self.isPlay = '1'
                                        if(!self.videostatus){
                                             //999
                                            self.websocketonopen2()
                                           // self.onmessages()
                                        }
                                    });
                                });
                                console.log(this.myVideo4,77777)
                                self.myVideo4.src(self.experimentVideoData3)
                                self.myVideo4.load(self.experimentVideoData3)


                            })
                             //self.flagvideo = true
                       } else {
                           self.flagvideo = false
                           self.experimentVideoData3 = ''
                           if(self.myVideo4 != ''){
                                 self.myVideo4.load('')
                            }
                            var videoPlayer2 = $("#video").get(0);
                            if (typeof (videoPlayer2) != "undefined") {
                                var myPlayer2 = videojs('video');
                                myPlayer2.dispose();
                            }
                       }

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                // self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/detail/resource?type=5').then(response => {
                //     let res = response.data
                //     if(res.code == '200'){
                //         if(res.data.experimentVideo.displayVersion.length > 0){
                //             self.experimentDialogVideoData = res.data.experimentVideo.displayVersion[0].filePath
                //         }
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })
            },
            // 关闭视频弹窗
            closeVideoDialog() {
                 let self = this
                self.dialogVideoDrag = false
                if(self.myVideo4){
                    self.myVideo4.pause()
                }
                self.experimentVideoData3 = ''
            },
            // 实验笔记拖拽弹窗
            HandNoteDialog() {
                let self = this
                self.dialogHandNoteDrag = true
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/notes?notesType=3').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$refs.HandNoteDialog.value = res.data
                        self.$refs.HandNoteDialog.toolbars = self.toolbarsMav
                    }else if(res.code == '404'){
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 虚拟共享信息
            NoteSelect(){
                let self = this
                if(self.noteBottom == -172){
                    self.$http.get('/tes/experiment/share').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(res.data.length == 0){
                                self.$message({
                                    message: '暂时没有信息',
                                    type: 'warning'
                                })
                            }else{
                                self.notesData = res.data
                                self.noteBottom = 40
                            }
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })

                }else{
                    self.noteBottom = -172
                }
            },
            greet(val){
                this.val = val;
            },
            // 虚机右侧菜单显示隐藏
            MirrorArrowFn() {
                let self = this
                if(self.mirrorRightWidth == -144){
                    self.mirrorRightWidth = 0
                }else{
                    self.mirrorRightWidth = -144
                }
            },
            checkedFn(){
                let self = this
                //首先el-table添加ref="multipleSelection"引用标识
                self.DisplayHideData.forEach(row => {
                    if(!row.showed){
                        self.$refs.multipleTable.toggleRowSelection(row)
                    }
                })
            },
            handleSelectAllChange(selection){
                let self = this
                self.DisplayHideData.forEach(row => {
                    if(selection.length == 0){
                        row.showed = true
                    }else{
                        row.showed = false
                    }
                })
            },
            handleSelectionChange(val) {
                let valArr = []
                for(let i = 0; i < val.length; i++){
                    valArr.push(val[i].id)
                }
                this.multipleSelection = valArr
            },
            toggleRowClick(selection, row){
                row.showed = !row.showed;
            },
            // 学生手册显隐
            StudentDisplayHide() {
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/chapter/authority?types=2,3&operatingType=2',[
                    {
                        resourcesType : 8,
                        names : ["实验手册"]
                    }
                ]).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.dialogDisplayHide = true
                        // 学生手册表格赋值
                        self.DisplayHideData = res.data
                        // 显示学生手册显隐弹窗
                        self.$nextTick(() => {
                            self.checkedFn();//每次更新了数据，触发这个函数即可。
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

            },
            tableRowClassName({row, rowIndex}) {
                let self = this
                if (rowIndex === self.indexOfFn(self.DisplayHideData, self.chapterId)) {
                    return 'blue-row';
                }
                return '';
            },
            indexOfFn(arr,item){
                for(let i = 0; i < arr.length; i++){
                    if(arr[i].id == item){
                        return i;
                    }
                }
            },
            // 学生手册显隐保存
            DisplayHideSave(){
                let self = this
                let dataArr = []
                // 拼装后台所要数据格式
                for(let i = 0; i < self.DisplayHideData.length; i++){
                    let DisplayHideJson = {}
                    DisplayHideJson.chapterId = self.DisplayHideData[i].id
                    DisplayHideJson.resourcesType = 8
                    DisplayHideJson.permission = [
                        {
                            name: '实验手册',
                            show: true
                        }
                    ]
                    for (let j = 0; j < self.multipleSelection.length; j++) {
                        if(self.multipleSelection[j] == self.DisplayHideData[i].id){
                            DisplayHideJson.permission = [
                                {
                                    name: '实验手册',
                                    show: false
                                }
                            ]
                        }
                    }
                    dataArr.push(DisplayHideJson)
                }
                self.$http.put('/tes/course/'+self.courseId+'/resource-right?operatingType=2',dataArr).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '设置成功',
                            type: 'success'
                        })
                        // 关闭学生手册显示弹窗
                        self.dialogDisplayHide = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 实验报告弹窗
            ReportDialog() {
                let self = this
                self.dialogReportDrag = true

                self.$nextTick(() => {
                    self.$refs.ReportQuestionDialog.value = self.$refs.ReportQuestion.value
                    self.$refs.ReportQuestionDialog.toolbars = self.toolbarsMav
                })
            },


            //添加专科版本建设
            //初始化详情列表
            DetailData(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.appList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
             //点击关闭
            deleteFns(){
                $('.detailBox').hide()
            },
             //点击详情
            detalList(){
                let self = this
                let IndexValue;
                for(let i =0; i< self.appList.length; i++){
                    if(self.appList[i].chapterIds.includes(Number(self.chapterId))){
                        IndexValue = i
                    }
                }
                this.activeName = IndexValue
                //最近学习索引等于打开这项
                this.openFlag = IndexValue
                this.scrollFn()
                //判断屏幕分辨率
                 if(window.screen.height <= 900 || $('.jx-virtual-machine-main').height() <= 715){
                    this.scrollFn2()
                }
                $('.detailBox').stop().slideToggle()
            },
            //进入详情
            EnteDetails(item,itembig,items){
                let self = this
                 self.singleTask =  item.chapterId
                 if(itembig.levels == 2 ){
                    self.stepType = itembig.stepTypeStr
                }else if( itembig.levels == 3){
                    self.stepType = items.stepTypeStr
                }
                //如果为真，可以跳转
                if(item.show){
                    if(item.name == '理论学习' || item.name == '任务引导'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CoursewareDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                taskId: self.chapterId,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '教学资源'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseResourceDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '备课材料'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseMaterialDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '实验学习' ||  item.experimentCourseFlag){
                        if(self.userStatus == 'NOT_CREATE_CLASS'){
                            self.$router.push({
                                path:'/Teaching/MyCourses/VirtualMachineManual',
                                query:{
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                     singleChaper:self.singleTask,
                                    stepTypeStr: self.stepType,

                                }
                            })
                        }else if(self.userStatus == 'EXIST_CLASS'){
                            self.clickId = item.id
                            self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(res.data.allocated){
                                    self.$http.get('/tes/experiment/course/'+item.id+'/prompt').then(response => {
                                        let res = response.data
                                        if(res.code == '200'){
                                            if(res.data){
                                                // 弹窗是否强制跳转
                                                self.dialogVirtual = true
                                            }else{
                                                if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                                    // 跳转实验页
                                                    self.$router.push({
                                                        path: "/Teaching/MyCourses/VirtualMachine",
                                                        query: {
                                                            courseId: self.courseId,
                                                            chapterId: item.id,
                                                            classId:self.classId,
                                                             stepTypeStr: self.stepType,
                                                            singleChaper:self.singleTask,
                                                        }
                                                    })

                                                }else if(self.roles == 'STUDENT'){
                                                    // 跳转实验页
                                                   self.$router.push({
                                                        path: "/Teaching/MyCourses/STVirtualMachine",
                                                        query: {
                                                            courseId: self.courseId,
                                                            chapterId: item.id,
                                                            classId:self.classId,
                                                             stepTypeStr: self.stepType,
                                                             singleChaper:self.singleTask,
                                                        }
                                                    })
                                                    window.location.reload()
                                                }
                                            }
                                        }else{
                                            self.$message.error(res.message)
                                        }
                                    }).catch(err => {
                                        console.log(err)
                                    })
                                }else{
                                    self.$router.push({
                                        path: "/Teaching/MyCourses/VirtualMachineManual",
                                        query: {
                                            courseId: self.courseId,
                                            chapterId: item.id,
                                            classId:self.classId,
                                             stepTypeStr: self.stepType,
                                            singleChaper:self.singleTask,
                                        }
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                        }
                    }else if(item.name == '随堂练习'){
                        //分为学生和老师身份
                        if(self.roles == 'STUDENT'){
                            if(self.userStatus=='NOT_CREATE_CLASS'){
                                self.typesStatus = 1   //没有班级时传1  不显示提交按钮
                            }else{
                                self.typesStatus = 2  //有班级时传2 显示提交按钮
                            }
                            self.$router.push({
                                name: "SPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    typesStatus:self.typesStatus,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            self.$router.push({
                                name: "TPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }

                    }

                }
            },
            //自动到最近学习
            scrollFn(){
                this.$nextTick(()=>{
                    let topValue = $('.studying').parent().offset().top
                    if(topValue > 790){
                        $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                    }
                })
            },
            scrollFn2(){
                this.$nextTick(()=>{
                    let h = $('.jx-virtual-machine-main').height()
                    let topValue = $('.studying').parent().offset().top
                    if(topValue > h+20){
                        $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                    }
                })
            },
            // 是否添加过班级
            ClassInit() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.userStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 确定跳转实验详情
            VirtualSave(){
                let self = this
                if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                    // 跳转实验页
                     self.$router.push({
                        path: "/Teaching/MyCourses/VirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                             stepTypeStr: self.stepType,
                             singleChaper:self.singleTask,
                        }
                    })
                }else if(self.roles == 'STUDENT'){
                    self.$router.push({
                        path: "/Teaching/MyCourses/STVirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                             stepTypeStr: self.stepType,
                             singleChaper:self.singleTask,
                        }
                    })
                    window.location.reload()
                }
                self.dialogVirtual = false
            },
            handleChange(val){
                //val 索引
                this.openFlag = val
                let vals = String(val)
                this.openFlag = vals
            },

        }
    }
</script>
<style scoped>

/* 单步骤判定全屏  */
   .el-dialog__wrapper{
       box-shadow:1px 1px 20px rgba(0,0,0,0.2);
   }


    .fullSide{
        height: 100%;
        padding: 0 10px;
        background: #e5e4e5;
        position: absolute;
        top: 0;
        left: 0;
        border-right: 1px solid #cfcfce;
    }
    .fullSide ul{
        margin-top: 60px;
    }
    .fullSide li{
        text-align: center;
        margin: 37px 0;
        cursor: pointer;

    }
    .fullSide li i{
        color: #989898;
        font-size: 16px;
    }
    .fullSide li p{
       color: #989898;
        margin-top: 5px;
        font-size: 12px;
    }
     .fullSide li:hover p{
          color: #727272;
     }
      .fullSide li:hover i{
         color: #727272;
     }
   .juded{
       position: absolute;
       bottom: 33px;
       left:-76%
   }
    .step-experiment-editor>>>.fullscreen {
        z-index: 99999!important;
    }
    .step-main-editor>>>.fullscreen {

        z-index: 99999!important;
    }
   .video-js>>>.vjs-poster{
       background-size:cover
   }

    .el-tooltip__popper>>>.is-light{
        border: none;
    }
    /* .video-js >>>.vjs-progress-holder{
        opacity: 0;
    } */
    .el-button--small, .el-button--small.is-round{
        padding: 7px 20px;
        font-size: 14px;
    }
    .yunumber{
        margin-top: 15px;
        color: #b2b2b2;
    }
    .dialogTime .dialog-content{
        text-align: center;
    }
    .dialogTime .dialog-content  i{
        font-size: 50px;
        color: #d6d6d6;
        display: block;
        margin-top: 25px;
    }
    .dialogTime .dialog-content >p{
        line-height: 24px;
        padding: 0 20px;
    }

    .button-style{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .courseName2{
        position: relative;
    }


    .courseName2 .icon-lock{
        position: absolute;
        right: -6px;
        top: 3px;
    }

    .el-collapse-item__header .collapsTitle2 .icon-lock{
        position: absolute;
        right: 11px;
        top: 3px;
    }
   .succssmask{
        position: absolute;
        width: 200px;
        height: 175px;
        top: 32px;
        background: rgba(255,255,255,0.9);
   }
   .succssmask-div {
         margin-top: 46px;
        text-align: center;
        font-size: 21px;
   }
   .succssmask-div .icon-chenggong{
       font-size: 30px;
       color: green;
   }
   .icon-lock{
        position: absolute;
        right: 11px;
        top: 3px;
    }
   .video-js>>>.vjs-tech{
        object-fit: fill;
    }
    .stepsTitle{
        border-bottom:1px solid #e9e9e9;
        line-height: 60px;
        height: 60px;
        font-size:16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        position: sticky;
        top: 0px;
        z-index: 9;
        background: #fff;
        margin-top: -1px;

    }
     #videoSteps{
        display: none;
    }
    .lastMask{
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9999;
        display: none;
    }
    .lastMask-center{
        width: 360px;
        height: 260px;
        left: 50%;
        top: 50%;
        margin-left: -130px;
        margin-top: -150px;
        background: #fff;
        position: absolute;
        border-radius: 30px;


    }
    .mains{
        text-align: center;
        clear: both;
        padding-top: 17px;
        font-size: 16px;
        line-height: 60px;
    }
     .mains .btnss{
        padding-bottom:20px ;
        margin-top: 14px;
    }
    .mains .title{
        font-size: 22px;
        font-weight: 800;
    }
    .mains p{
        line-height: 30px;
    }
    .bg-img{
        background-image: url('../../../assets/images/bg_steep.png');
        width: 370px;
        height: 260px;
        left: -54px;
        top: -149px;
        position: absolute;

    }
    .cha{
        font-size: 38px;
        float: right;
        margin-right: 19px;
        cursor: pointer;

    }
   .bott{
        margin-bottom: 80px;
    }
    .video-js{
        width: 100%;
        height: 450px;
    }
    .el-select>>>.el-select__tags-text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 86px;
        display: inline-block;
        vertical-align: -5px;
    }
    /* 专科版本 */
    .dialog-virtual .el-dialog__footer{
        text-align: center;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #4a4a4a;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 760px;
    }
    .el-collapse{
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        background: #2d3136;
        color: #fff;
        border-bottom:none;
        text-align: center;
        position:relative
    }
    .el-collapse-item>>>.el-icon-arrow-right{
        display: none;
    }
    .el-collapse-item>>>.el-collapse-item__content{
        background: #26292c;
        color: #a2a3a4;
        padding: 5px 20px;

    }
    .el-collapse-item__content>div{
        padding: 4px 0;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        border-bottom:none;
    }

</style>
<style lang="scss" scoped >


   .mask-bg{
            width: 250px;
            background: #fff;
            z-index: 999;
            position: fixed;
            height: 100%;
            left: -100%;
            top: 60px;
            transition: left .4s;
            -moz-transition: left .4s; /* Firefox 4 */
            -webkit-transition: left .4s; /* Safari 和 Chrome */
             ul {
                padding:20px  10px;
                li{
                    line-height: 50px;
                    height: 50px;
                    padding-left: 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
     }
    .mask{
        background: #7c7c7c;
        position: fixed;
        width: 100%;
        top: 60px;
        height: 100%;
        left: 0px;
        opacity: 0;
        display: none;
        z-index: 9;

    }
    .mask-bg .activeSteep{
        color: #1277eb;
    }

</style>
<style lang="scss" >
    @import "./../../../styles/layout/color_variables";
    @import "./../../../styles/layout/jude";
    //步骤

    .item-btn-tooltip3.is-light{
        border: none;
        margin-top: 0px;
    }
    .foot-content{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        position: fixed;
        bottom: 0;
        left: 0%;
        overflow: hidden;
        border-top: 1px solid #e9ecef;
        z-index: 999;

        .nextvpage{
            margin-right: 20px;
            margin-left: 10px;
        }
        .icon-gengduo{
            font-size: 22px;
            padding-top: 8px;
            padding-left: 15px;
            cursor: pointer;
        }


    }
    #jx-Stvirtual-machine{
        position: relative;
        height: 100%;
        overflow: hidden;
        background: #fff;
        .model-download {
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }
        .upload-content {
            text-align: center;
        }
        .excel-content {
            position: relative;
            padding-top: 120px;
            min-height: 300px;
            justify-content: center;
            align-items: center;
            .upload-demo {
                position: relative;
            .el-upload-list {
                position: absolute;
                left: 26px;
                top: 40px;
                li {
                    text-align: left;
                }
            }
            }
            .button-style {
                margin-right: 10px;
            }
            span {
                color: #1277eb;
                vertical-align: middle;
            }
        }
        .upload-file {
            margin: 10px 0 0 0;
            .iconfont {
                font-size: 24px;
                vertical-align: sub;
                color: $blue;
                margin: 0 0 0 10px;
            }
        }
        .tab-main {
            box-sizing: border-box;
            .jx-main-content {
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
                .jx-content-tips{
                    text-align: center;
                    margin-top: 100px;
                }
                p {
                    line-height: 24px;
                }
                img{
                    max-width:100%;
                }
            }
        }
        .tab-sub {
            background: #f8f8f8;
            padding: 20px 20px 0;
            > div {
                line-height: 40px;
                font-size: 14px;
                padding: 10px 20px;
                cursor: pointer;
            }
            .active {
                background: #fff;
                color: $blue;
                border-radius: 5px 5px 0 0;
            }
            .look-assess{
                font-size: 14px;
                color: #1277eb;
                margin-left: 15px;
                line-height: 30px;
                cursor: pointer;
                border-radius: 4px;
                margin-top: 14px;
                &:hover{
                    color: #fff;
                }
            }
            span{
                float: right;
                line-height: 60px;
                color: #474747;
                em{
                    color: #1277eb;
                }
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
        .jx-virtual-machine-header{
            height: 60px;
            line-height: 60px;
            background: #101937;
            color: $white;
            .jx-virtual-machine-header-logo{
                margin-left: 23px;
                font-size: 16px;
                line-height: 60px;
            }
            .jx-virtual-machine-nav{
                margin: 20px 0 0 30px;
                float: left;
                height: 40px;
                line-height: 40px;
                span{
                    width: 90px;
                    color: $white;
                    cursor: pointer;
                    text-align: center;
                    border-radius: 5px 5px 0 0;
                    transition: .3s;
                    // &:hover{
                    //     background: $white;
                    //     color: #101937;
                    // }
                    &.active{
                        background: $white;
                        color: #101937;
                    }
                }
            }
            .jx-virtual-machine-nav2{
                // width: 50%;
                // float: right;
                @extend .jx-virtual-machine-nav;
            }
            .jx-virtual-machine-header-info{
                margin-right: 40px;
                height: 60px;

                span{
                    vertical-align: top;
                    color: #bbbb;
                    cursor: pointer;

                }
                i{
                    font-size: 16px;
                    margin-left: 12px;
                    cursor: pointer;
                    vertical-align: -webkit-baseline-middle;
                    color: #bbbb;

                }
                &:hover{
                    span{
                        color: #fff;
                    }
                    i{
                         color: #fff;
                    }

                }

            }
        }
        .jx-virtual-machine-main{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            .step-main-content{
                height: 100%;
                background: #fff;
                overflow-x: scroll;
                &::-webkit-scrollbar {
                    width: 5px;
                    height: 0;
                }

                &::-webkit-scrollbar-thumb {
                    background: #c1c1c1;
                }
                .step-main-content-text{
                    // width: 100%;
                    // background: $white;
                    margin-top: 10px;
                    padding: 0 15px;
                    .display-hide-btn{
                        float: right;
                        margin: 10px 10px 20px 0;
                    }
                }
                .step-main-btn-box{
                    overflow: hidden;
                    padding: 12px 16px 15px 15px;
                    text-align: right;
                    i{
                        color: #385899;
                        font-size: 16px;
                        line-height: 16px;
                        vertical-align: top;
                        cursor: pointer;
                    }
                }
                .step-main-btn-group{
                    text-align: center;
                    margin-top: 20px;
                    button{
                        width: 90px;
                        &:first-child{
                            // background: $btn-blue;
                            // color: #fff;
                            margin-right: 5px;
                        }
                    }
                }
            }
            .step-main-mirror{
                position: relative;
                width: 65%;
                height: 100%;
                // overflow-x: auto;
                // &::-webkit-scrollbar {
                //     width: 6px;
                // }
                // &::-webkit-scrollbar-thumb {
                //     background: #4d5368;
                //     border-radius: 6px;
                // }
                .mirror-iframe {
                    border-left: 1px solid rgba(0, 0, 0, 0.07);
                }
                .mirror-iframe-tip{
                    text-align: center;
                    img{
                        margin-top: 20%;
                    }
                    .mirror-iframe-tip-text{
                        display: block;
                        font-size: 16px;
                        color: #727272;
                        margin: 28px 0 18px;
                    }
                }
                .step-main-mirror-dialog{
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: 144px;
                    box-sizing: border-box;
                    background: #2e2f33;
                    transition: .3s;
                    .step-main-mirror-dialog-block{
                        height: 100%;
                        overflow-x: scroll;
                        padding: 0 24px;
                        &::-webkit-scrollbar {
                            width: 3px;
                            height: 0;
                        }

                        &::-webkit-scrollbar-thumb {
                            background: $white;
                        }
                    }
                    .mirror-dialog-header{
                        font-size: 14px;
                        line-height: 18px;
                        color: $white;
                        padding: 20px 0;
                        h2{
                            font-weight: normal;
                            font-size: 16px;
                            margin-bottom: 10px;
                        }
                        span{
                            font-size: 18px;
                            line-height: 18px;
                            font-weight: 400;
                            vertical-align: bottom;
                        }
                    }
                    .mirror-dialog-item{
                        border-top: solid 1px rgba(255, 255,255, .3);
                        padding: 15px 0;
                        .item-btn{
                            position: relative;
                            line-height: 40px;
                            font-size: 14px;
                            color: $white;

                            span{
                                cursor: pointer;
                                &:hover{
                                    color: #1277eb;
                                }
                            }
                            i{
                                // float: left;
                                width: 22px;
                                text-align: left;
                                // margin-right: 5px;
                                display: inline-block;
                                vertical-align: -webkit-baseline-middle;
                                &.icon-guanbifenxiang{
                                    font-size: 14px;
                                }
                                &:hover{
                                    color: #1277eb;
                                }
                            }
                        }
                    }
                }
                .step-main-mirror-arrow{
                    position: absolute;
                    top: 20%;
                    right: 144px;
                    width: 22px;
                    height: 80px;
                    line-height: 80px;
                    text-align: center;
                    background: #2e2f33;
                    border-radius: 4px 0 0 4px;
                    padding: 5px 0;
                    cursor: pointer;
                    transition: .2s;
                    div{
                        color: #fff;
                        font-size: 14px;
                        width: 22px;
                        line-height: 26px;
                        // &:after{
                        //     content: '\003C';
                        // }
                        // &.active{
                        //     &:after{
                        //         content: '\003E';
                        //     }
                        // }
                    }
                }
                .step-main-mirror-side{
                    position: absolute;
                    bottom: 50px;
                    right:150px;
                    // width: 240px;
                    height: 60px;
                    background: #1c1f21;
                    color: $white;
                    text-align: center;
                    border-radius: 5px;
                    z-index: 2;
                    li{
                        float: left;
                        width: 60px;
                        height: 36px;
                        display: block;
                        font-size: 12px;
                        margin-top: 14px;
                        position: relative;
                        cursor: pointer;
                        border-right: solid 1px #353636;
                        box-sizing: border-box;
                        &:hover{
                            color: #dfdfdf;
                        }
                        &:last-child{
                            border-right: none;
                        }
                        .iconfont{
                            display: block;
                            margin-bottom: 2px;
                            font-size: 20px;

                        }

                    }
                }
            }
        }
        //分享
        .dialog-share{
            .button-style{
                width: 90px;
            }

            .dialog-content{
                .share-item{
                    width: 280px;
                    height: 28px;
                    line-height: 28px;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 14px;
                    color: $title-gray;
                    margin-top: 20px;
                    span{
                        float: left;
                        width: 210px;
                        border-right: solid 1px #e8e8e8;
                        padding-right: 38px;
                        text-align: right;
                        box-sizing: border-box;
                    }
                    .el-switch{
                        float: left;
                        margin: 4px 0 0 30px;
                    }
                }
            }
        }
        //分享桌面
        .dialog-share-desktop{
            .share-desktop-item{
                margin-bottom: 35px;
                &:last-child{
                    margin-bottom: 0;
                }
                .item-label{
                    float: left;
                    width: 165px;
                    height: 32px;
                    line-height: 32px;
                    text-align: right;
                    font-size: 14px;
                    color: $title-gray;
                }
                .el-radio-group{
                    margin-top: 8px;
                }
            }
        }
        //实验截图
        .dialog-screenshot{
            .dialog-content{
                img{
                    width: 763px;
                    height: 440px;
                }
            }
        }
        //学生手册
        .dialog-handbook{
            p{
                font-size: 14px;
                color: $title-gray;
                text-align: center;
                line-height: 48px;
                span{
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .handbook-item{
                .item-label{
                    float: left;
                    width: 155px;
                    height: 48px;
                    line-height: 48px;
                    text-align: right;
                    font-size: 14px;
                    color: $title-gray;
                }
                .el-radio-group{
                    margin-top: 17px;
                }
            }
        }
        //视频拖拽
        .dialog-video{
            position: absolute;   /*定位*/
            top: 20%;
            left: 35%;
            width: 800px;
            height: 500px;
            overflow: hidden;
            video{
                object-fit: fill;
            }
            .el-dialog__header{
                cursor: move;
            }
            .el-dialog{
                height: 100%;
                width: 100%;
                margin-top: 0 !important;
                margin-bottom: 0;
            }
            .el-dialog__body{
                position: absolute;
                top: 46px;
                bottom: 0;
                width: 100%;
                // height: 438px;
                padding: 0;
                padding-bottom: 3px;
                background: rgba(43, 51, 63, 0.7);
            }
            .dialog-body,.line,.video-js{
                height: 100%;
            }
        }
        //手册拖拽
        .dialog-hand-book{
            position: absolute;   /*定位*/
            top: 35%;
            left: 25%;
            width: 800px;
            overflow: hidden;
            .v-note-wrapper{
                height: 100%;
            }
             .stepsTitle2{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 350px;
            }
             .videoflag{
                position: absolute;
                right: 14px;
                top: 0px;
                z-index: 9;
                color: #385899;
                font-size: 14px;
                cursor: pointer;
                .icon-shipin4{
                    font-size: 16px;
                    vertical-align: -1px;

                }
                &:hover{
                    color: #1277eb;
                }
            }
            .el-dialog__header{
                cursor: move;
            }
            .el-dialog{
                width: 100%;
                height: 100%;
                margin-top: 0 !important;
                .el-dialog__body{
                    width: 100%;
                    box-sizing: border-box;
                    top: 46px;
                    bottom: 60px;
                    overflow-x: scroll;
                    padding: 0 20px;
                    position: absolute;
                    &::-webkit-scrollbar {
                        width: 5px;
                        height: 0;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c1c1c1;
                    }
                    .dialog-body{
                       // height: 365px;
                        padding: 10px 0 ;
                    }
                }

                .el-dialog__footer {
                    left: 0;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    padding: 0 20px 10px;
                }
            }
        }
        .dialog-target{
            position: absolute;   /*定位*/
            top: 35%;
            left: 25%;
            width: 800px;
            overflow: hidden;
            .v-note-wrapper{
                height: 100%;
            }
            .videoflag{
                position: absolute;
                right: 14px;
                top: 0px;
                z-index: 9;
                color: #385899;
                font-size: 14px;
                cursor: pointer;
                .icon-shipin4{
                    font-size: 16px;
                    vertical-align: -1px;

                }
                &:hover{
                    color: #1277eb;
                }
            }
            .el-dialog__header{
                cursor: move;
            }
            .el-dialog{
                width: 100%;
                height: 100%;
                margin: 0 auto !important;
                .el-dialog__body{
                    overflow-x: scroll;
                    padding: 0 20px;
                    position: absolute;
                    box-sizing: border-box;
                    width: 100%;
                    top: 46px;
                    bottom: 90px;
                    &::-webkit-scrollbar {
                        width: 5px;
                        height: 0;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c1c1c1;
                    }
                    .dialog-body{
                        height: 400px;
                        padding: 10px 0 ;
                    }
                }
                .el-dialog__footer {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                }
            }
        }
        // 实验笔记拖拽
        .dialog-hand-note{
            position: absolute;   /*定位*/
            top: 30%;
            left: 30%;
            width: 800px;
            height: auto;
            overflow: hidden;
            .el-dialog__header{
                cursor: move;
            }
            .el-dialog{
                width: 100%;
                height: 100%;
                margin-top: 0 !important;
                .el-dialog__body{
                    box-sizing: border-box;
                    overflow: auto;
                    position: absolute;
                    top: 46px;
                    bottom: 90px;
                    width: 100%;
                    .dialog-body{
                        height: 100%;
                        .v-note-wrapper{
                            height: 100%;
                        }
                    }
                }

                .el-dialog__footer {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                }
            }
        }
        //sftp上传弹窗样式
        .sftp-dialog{
            .el-dialog__body {
                padding: 38px 50px 30px;
            }
            .sftp-content{
                .sftp-header{
                    border-bottom: solid 2px #dfdfdf;
                    padding-bottom: 25px;
                    margin-bottom: 25px;
                    p{
                        span{
                            color: #5281c6;
                        }
                    }
                }
                p {
                    font-size: 16px;
                    line-height: 30px;
                }
                .sftp-title{
                    font-size: 16px;
                    color: #333;
                    font-weight: bold;
                    margin-bottom: 15px;
                }
                .sftp-desc{
                    p{
                        span{
                            padding: 5px 10px;
                            border-radius: 5px;
                            background: #eeeeee;
                            font-size: 14px;
                            margin: 0 5px;
                        }
                        i{
                            margin-left: 5px;
                            color: #5281c6;
                            position: relative;
                            &:last-child{
                                margin-left: 40px;
                            }
                            img{
                                position: absolute;
                                right: -28px;
                                top: -20px;
                            }
                        }
                    }
                    .desc-item{
                        margin-top: 30px;
                        height: 60px;
                        .item-pic{
                            float: left;
                        }
                        a{
                            float: left;
                            font-size: 14px;
                            margin-top: 12px;
                            i{
                                font-size: 18px;
                                vertical-align: sub;
                                margin-left: 24px;
                            }
                        }
                        // overflow-y: scroll;
                        // &::-webkit-scrollbar {
                        //     width: 3px;
                        // }

                        // &::-webkit-scrollbar-thumb {
                        //     background: #5281c6;
                        // }
                    }
                }
            }
        }
        //实训项目制作剪切板
        .cut-dialog{
            .cut-title{
                margin-bottom: 15px;
                p{
                    font-size: 14px;
                    span{
                        font-size: 16px;
                    }
                }
            }
            .el-form{
                .el-form-item{
                    .el-form-item__content{
                        height: auto;
                    }
                    .desc-num{
                        float: right;
                        margin-top: 170px;
                        color: #bbb;
                    }
                    .el-textarea {
                        float: left;
                        width: 85%;
                        textarea{
                            height: 200px;
                            resize: none;
                        }
                        .el-textarea__inner {
                            min-height: 200px;
                            overflow-y: scroll;

                            &::-webkit-scrollbar {
                                width: 5px;
                            }

                            &::-webkit-scrollbar-thumb {
                                background: #6589ae;
                                border-radius: 2px;
                            }
                        }
                    }
                }

            }
        }
        .upload-dialog{
            .el-input{
                float: left;
            }
            .version-file{
                .el-button{
                    position: relative;
                    width: 100px;
                    height: 40px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    span{
                        display: block;
                    }
                }
                input{
                    position: absolute;
                    width: 100px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background:#cc281a;
                    opacity: 0;
                }
                p{
                    margin-top: 20px;
                    word-break:break-all;
                }
            }
        }
        // 上传流程
        .common-tool-dialog{
            .el-input{
                float: left;
            }
            .version-file{
                padding: 0 40px;
                .el-form-item{
                    margin-bottom: 0;
                }
                .el-button{
                    float: left;
                    position: relative;
                    background: #1277eb;
                    color: #fff;
                    border-radius: 5px;
                    width: 100px;
                    height: 36px;
                    line-height: 36px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    cursor: pointer;
                    span{
                        display: block;
                        cursor: pointer;
                    }
                }
                input{
                    position: absolute;
                    width: 100px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background:#cc281a;
                    opacity: 0;
                    cursor: pointer;
                }
            }
        }
        // 学生手册显隐
        .dialog-display-hide{
            .el-table .blue-row {
                background: #f5f7fb;
            }
            .el-table{
                tr{
                    th{
                        &:nth-child(2){
                            .cell{
                                text-align: left;
                            }
                        }
                    }
                    td{
                        &:last-child{
                            text-align: left;
                        }
                    }
                }
            }
        }
        // 镜像保存弹窗
        .dialog-mirror-save{
            .el-form{
                .el-form-item{
                    position: relative;
                    .el-form-item__content{
                        height: auto;
                    }
                    .el-input{
                        .el-input__inner{
                            width:230px;
                        }
                    }
                    .el-textarea{
                        height: 180px;
                        .el-textarea__inner{
                            width:600px;
                            resize: none;
                        }
                    }
                }
            }
            .distribution-swpier{
                position: relative;
                width: 700px;
                height: 64px;
                margin-bottom: 35px;
                margin-left: 55px;
                margin-top: 15px;
                .swiper-btn{
                    background-image: none;
                    outline: 0;
                    top: 46px;
                    i{
                        font-size: 20px;
                        color: #b1b1b1;
                        &:hover{
                            color: #474747;
                        }
                    }
                }
                .swiper-button-prev{
                    left: -35px;
                }
                .swiper-button-next{
                    right: -35px;
                }
            }
            .distribution-box{
                position: relative;
                width: 100%;
                height: 64px;
                line-height: 64px;
                background: #fff;
                border: solid 1px #d9d9d9;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                img{
                    width: 100%;
                }
                &:hover{
                    border-color: #1277eb;
                }
                i{
                    position: absolute;
                    bottom: 28px;
                    right: 8px;
                    font-size: 14px;
                    color: #3fdb9b;
                    width: 14px;
                    height: 14px;
                }
            }
        }
        // 重选配置弹窗样式
        .dialog-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                padding: 0 50px;
                .el-dialog__body{
                    position: relative;
                }
                .el-form-item__label{
                    width: 95px;
                }
                .el-select{
                    .el-input__inner{
                        width: 80px;
                    }
                }
                .el-input__icon{
                    line-height: 32px;
                }
                .miror-item{
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                            .el-input__inner{
                                width: 150px;
                            }
                        }
                    }
                }
                .config-item{
                    .item-config{
                        width: 340px;
                        .el-select{
                            .el-input__inner{
                                width: 110px;
                            }
                        }
                    }
                    .item-cpu{
                        .el-form-item__error{
                            left: 95px;
                        }
                    }
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                        }
                        &.item-distributed{
                            width: 270px;
                            .el-select{
                                .el-input__inner{
                                    width: 180px;
                                }
                            }
                            .el-form-item__error{
                                left: 85px;
                            }
                        }
                        &.item-Gpu{
                            width: 100px;
                            .el-form-item__label{
                                width: 55px;
                            }
                        }
                    }
                }
                .form-title{
                    font-size: 16px;
                    color: #385899;
                    width: 85px;
                    margin-bottom: 15px;
                    text-align: center;
                }
                .el-select{
                    .el-input__inner{
                        width: 180px;
                    }
                }
                .el-cascader{
                    line-height: 32px;
                }
                .item-node{
                    .el-form-item{
                        display: inline-block;
                        width: 330px;
                    }
                }
            }
            .el-dialog__footer{
                text-align: center;
                .el-button{
                    width: auto;
                }
            }
            .button-style{
                min-width: 90px;
            }
            .el-radio-group{
                .el-radio__inner{
                    border-color: #DCDFE6;
                }
                .el-radio{
                    width: 80px;
                }
            }
            .virtual-step{
                width: 188px;
                border-bottom: solid 3px #dfdfdf;
                margin-top: 15px;
                margin-left: 80px;
                ul{
                    li{
                        float: left;
                        width: 19px;
                        height: 19px;
                        line-height: 19px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 10px;
                        margin: -9px 0 0 0;
                        background: #d9d9d9;
                        cursor: pointer;
                        &.active-disabled{
                            cursor:not-allowed;
                        }
                        &:first-child{
                            margin-left: 10%;
                        }
                        &:nth-child(2){
                            margin-left: 29%;
                        }
                        &:last-child{
                            margin-left: 31%;
                        }
                        &.active{
                            background: #1277eb;
                        }
                    }
                }
            }
            .distribution-item{
                width: 208px;
                height: 280px;
                border: solid 1px #e8e8e8;
                border-radius: 4px;
                position: absolute;
                right: 55px;
                top: 95px;
                .jx-course-box{
                    margin-top: 25px;
                    text-align: center;
                    img{
                        width: 34px;
                        height: 39px;
                    }
                    span{
                        display: block;
                        font-size: 14px;
                        color: $title-gray;
                        margin-top: 10px;
                    }
                }
                .jx-course-icon{
                    position: absolute;
                    right: 18px;
                    top: -5px;
                }
                .jx-course-text{
                    margin: 10px 24px 0;
                    height: 145px;
                    overflow-y: scroll;
                    font-size: 12px;
                    line-height: 16px;
                    color: $table-gray;
                    word-wrap: break-word;
                    &::-webkit-scrollbar {
                        width: 2px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #6c6c6c;
                    }
                }
            }
        }
        // 报告拖拽
        .dialog-report{
            position: absolute; /*定位*/
            top: 10%;
            left: 40%;
            width: 800px;
            // height: 484px;
            overflow: hidden;
            .el-dialog__header {
                cursor: move;
            }
            .el-dialog {
            width: 100%;
            height: 100%;
            margin-top: 0 !important;
            margin-bottom: 0;
            .el-dialog__body {
                height: 100%;
                overflow: auto;
                background: #f8f8f8;
            }
            }
            .tab-main{
                padding: 0;
            }
            .tab-sub {
                > div {
                height: 36px;
                line-height: 36px;
                font-size: 14px;
                padding: 0 20px;
                cursor: pointer;
                }
            }
            .jx-main-content {
                background: #fff;
                .jx-content-tips{
                    text-align: center;
                    margin-top: 100px;
                }
            }
            .step-main-editor{
                height: 380px;
                .v-note-wrapper{
                    height: 100%;
                }
            }
        }
        // 图片放大

        .bigger-dialog{
            .el-dialog{
                width: min-content;
                z-index: 9999;
            }
            .el-dialog__header{
                display: none;
            }
            .el-dialog__body{
                padding: 0;
                background: transparent;
                text-align: center;
            }
        }

        // 二期评价
        .assess-dialog{
            font-size: 16px;
            color: #727272;
            line-height: 30px;
        }
    }

    //专科版本添加列表样式
    .chapterlists{
        cursor: pointer;
    }
    //详情盒子
    .detailBox{
        width: 400px;
        position: absolute;
        top: 66px;
        bottom: initial;
        right: -165px;
        background: #26292c;
        max-height: 760px;
        border-radius: 4px;
        display: none;
        z-index: 9;
        .chapterList-top{
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            padding: 0 18px;
            &>p{
                line-height: 50px;
                color: #a2a3a4;
            }
            i{
                color: #a2a3a4;
                &:hover{
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
        .infoName{
            display: inline-block;
             &:hover{
               span{color: #1374e4;}
               .crile{
                    background: #1374e4;
                }
            }
        }
        .icon-diannao-copy{
            font-size: 14px;
            margin-left: 8px;
            color: #1374e4;
            vertical-align:super
        }
        .courseName{
            margin: 5px 0;
            cursor: pointer;
            .icon-tubiaozhizuomoban1{
                color: #1374e4;
                font-size: 16px;
            }
            &:hover{
                color: #fff;

            }
        }
    }
    .collapsTitle{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
            max-width: 270px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 13px;
        }
        .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
        &:hover{
            color: #fff;
            .icon-chaibaoguoqujian{
                 color: #fff;
            }
        }
    }
    .icon-shijian00{
        color: #1374e4;
        margin-left: 5px
    }

    .crile{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #a2a3a4;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 9px;

    }
    .studying{
        color: #1374e4;
    }
    .crileBg{
        background: #1374e4;
    }
    .detailbox{
        padding:2px 0 2px 15px;
        cursor: pointer;
        &:hover{
            color: #1374e4;
            .crile{
                background: #1374e4
            }
        }
    }
    .Tiltlefiles{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 210px;
        cursor: pointer;
    }

    .intnet{
        color: #1277eb;
        font-size: 14px;
        display: inline-block;
        vertical-align: 12px;
    }
    .taskName{
        margin-right: 5px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 300px;
    }
    .icon-42{
        font-size: 12px;
        vertical-align: text-bottom;
        margin-left: -2px;
        margin-right: 5px;
    }
    .dialogList{
        .dialog-content{
            text-align: center;
            i{
            font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                text-align: center;
                line-height: 18px;

            }
            .handbook-item{
                text-align: center;
                margin-top: 30px;
            }
        }
    }

    .machineInfo{
        margin-right: 40px;
    }
    .chaptersa{
        cursor: pointer;
        position: absolute;
        right: 200px;
        color: #bbb;
        &:hover{
            color: #fff;
        }
    }
</style>


<style lang="scss">
.forbidden-btn {
    width: 90px;
    height: 32px;
    border: 1px solid #999999;
    border-radius: 20px;
    color: #999999;
    cursor: pointer;
    // padding: 0 16px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    line-height:32px;
}
/* 步骤滚动条  */
       #spaceHeight{
            overflow-y: scroll;
        }
        #spaceHeight::-webkit-scrollbar { /*滚动条整体样式*/
            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        #spaceHeight::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #ccc;/*滚动条颜色*/
        }

        #spaceHeight::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }
//#region 王天宇-问题答疑 css
    #question-buhui{
        padding:20px 30px;
        .question-b-title{
            display: flex;
            justify-content: space-between;
            color:#474747;
            margin-bottom:20px;
            line-height: 30px;
        }
        .question-b-btngroup{
            > span{
                margin-right:10px;
            }

        }
        .question-b-list{
            color:#727272;
            .question-b-list-ul{
                li{
                    padding:0 10px;
                    line-height: 50px;
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    border-bottom:1px solid #f4f4f4;
                    &:hover{
                        color:#1277eb;
                        background:#f5f7fb;
                    }
                }
                .tea-answer{
                    &::before{
                        content:"常见问题";
                        background:#1ac48a;
                        font-size: 12px;
                        color:#fff;
                        border-radius: 12px;
                        padding:2px 10px;
                        margin-right:6px;
                    }
                }
            }

        }
        .question-details{
            .qd-back{
                font-size: 16px;
                line-height: 30px;
                color:#474747;
                margin-bottom:20px;
                cursor: pointer;
            }
            .tea-answer{
                &::before{
                    content:"常见问题";
                    background:#1ac48a;
                    font-size: 12px;
                    color:#fff;
                    border-radius: 12px;
                    padding:2px 10px;
                    margin-right:6px;
                }
            }
            .stu-answer{
                &::after{
                    content: "用户";
                    font-size:12px;
                    background:#fff6e5;
                    color:#ffaa00;
                    border-radius: 12px;
                    padding:2px 10px;
                    margin-left:6px;
                }
            }
            .qd-title{
                font-size:24px;
                color:#1d1d1d;
                margin:20px 0;
                line-height: 40px;
            }
            .qd-content{
                font-size: 16px;
                color:#727272;
                margin:20px 0;
                line-height: 30px;
            }
            .qd-list{
                .qd-list-title{
                    font-size: 16px;
                    padding:20px 0;
                    color:#474747;
                    border-bottom:1px solid #f4f4f4;
                }
                li{
                    font-size: 16px;
                    padding:10px 0;
                    line-height: 30px;
                    color:#727272;
                    border-bottom:1px solid #f4f4f4;
                    .qd-name{
                        color:#999999;
                    }
                    .ide{
                        &::before{
                            content: "用户";
                            font-size:12px;
                            background:#fff6e5;
                            color:#ffaa00;
                            border-radius: 12px;
                            padding:2px 10px;
                            margin-left:6px;
                        }
                    }
                    .tea{
                        &::before{
                            content:"权威解答";
                            background:#1ac48a;
                            font-size: 12px;
                            color:#fff;
                            border-radius: 12px;
                            padding:2px 10px;
                            margin-left:6px;
                        }
                    }
                }

            }
        }
    }
    .question-buhui-tiwen-dialog{
        .tiwen-bt{
            &::before{
                content:"*";
                color:#f56c6c;
                margin-right:6px;
            }
        }
        .dialog-tiwen-title{
            font-size:14px;
            .el-input{
                width:200px;
                .el-input__inner{
                    width:200px;
                }
            }
        }
        .dialog-tiwen-content{
            .ms-title{
                line-height: 40px;
                text-align: left;
            }
        }
    }

//#endregion 王天宇-问题答疑 css

//#region 王天宇 tab换地方
.new-step-main-content{
    padding-top:56px;
    position: relative;
    box-sizing: border-box;
}
.new-nav-naxialai{
    box-sizing: border-box;
    border-bottom:10px solid #f8f8f8;

    overflow: hidden;
    background:#fff;
    color:#fff;
    line-height: 55px;
    text-indent: 37px;
    //padding-left:37px;
    position: fixed;
    top:60px;
    z-index:1;
    width:inherit;
    >span{
        font-size: 14px;
        color:#727272;
         margin-right:20px;
        cursor: pointer;
        &:hover{
            color:#385899;
        }
    }
    .active{
        font-weight: bold;
        color:#385899;
        &::after{
            display:block;
            content:"";
            height:2px;
            width:50%;
            margin:0 auto;
            background:#385899;
            transform: translate(17px,-10px);
        }
    }
}
//#endregion 王天宇 tab换地方
</style>

<!-- 王天宇 星级评分 css -->
<style lang="scss">
    #jx-Stvirtual-machine{
        .star-box{
            margin-left:5px;
            display:flex;
            align-items: center;
        }
        .ms-title{
            text-align: left;
        }
        .dialog-tiwen-title{
            text-align: left;
        }
    }
</style>
<!-- 王天宇 星级评分 css end -->
